css - 通过 css 仅定位 float div 的最后一行

Question

我有 4 行 float 的 div。它的工作方式是每个 div 的宽度为 25%，因此每行总是有 4 个 div。每行周围没有容器 div。

我想知道是否有办法通过 CSS 仅定位最后一行的 div，而不管那里是否有 1 个或 2 个或 3 个或 4 个 div(它会随着网站的动态而变化)。

我想也许有 nth-child 值可能有办法，但我无法理解它。有什么想法吗？

Answer 1

body {
  counter-reset: div
}

div {
  counter-increment: div
}

div:before {
  content: counter(div)
}

div {
  float: left;
  width: 25%;
}

#test div:nth-last-child(5)~div:nth-child(4n)~div {
  background: gray;
}

<section id="test">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</section>

您可以组合第 nth-child 和 nth-last-child :

https://codepen.io/gc-nomade/pen/QqNvLV

div:nth-last-child(5) ~ div:nth-child(4n) ~ div {
  background:gray;
}

---

要进一步包含少于 6 个框的情况，需要组合一些伪类。

:伪类也可以用来玩其他风格。

div {
  float: left;
  width: 25%;
  border-bottom: solid 1px;
}
div:nth-child(3n) {
  box-shadow: inset 0 0 0 2em rgba(255, 255, 255, 0.5)
}

div:nth-child(3n + 1) {
  box-shadow: inset 0 0 0 2em rgba(255, 0, 255, 0.1)
}

.test div:nth-last-child(6)~div:nth-child(4n)~div,
.test div:nth-last-child(5):first-child~div:nth-child(4n)~div,
.test div:nth-last-child(4):first-child,
.test div:nth-last-child(4):first-child~div,
.test div:nth-last-child(3):first-child,
.test div:nth-last-child(3):first-child~div,
.test div:nth-last-child(2):first-child,
.test div:nth-last-child(2):first-child~div,
.test div:nth-last-child(4):first-child,
.test div:last-child:first-child {
  background: gray;
  box-shadow: 0px -1px, 1px -1px, 1px 0;
  border: none;
}

.test {
  counter-reset: div;
  width: 8em;
  background: lightblue;
  text-align: center;
  line-height: 2em;
  float: left;
  margin: 1em;
  border: solid 1px;
}

.test:nth-child(2n)
{
  float:none;
  display:inline-table;
}
.test:nth-child(3n)
{
  float:right;
  /*clear:left;*/
}
div {
  counter-increment: div
}

div:before {
  content: counter(div)
}

<section class="test"><div></div><div></div><div></div><div></div></section>
<section class="test"><div></div><div></div><div></div></section>
<section class="test"><div></div><div></div></section>
<section class="test"><div></div></section>
<section class="test"><div></div><div></div><div></div><div></div><div></div></section>
<section class="test"><div></div><div></div><div></div><div></div><div></div><div></div></section>
<section class="test"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></section>
<section class="test"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></section>
<section class="test"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></section>
<section class="test"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></section>