通过css仅定位浮动div的最后一行

Question

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

我想知道是否有一种方法，通过CSS，只针对最后一行的div，无论是否有1或2或3或4个div（它会因站点是动态的而变化）。

我想也许有了n-child值可能会有一种方法，但我无法理解它。有什么想法吗？

Answer 1

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

你可以结合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个框的情况，需要组合一些伪类。

：pseudoclass也可以用来玩其他风格。

＆＃13;

＆＃13;

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)
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

（已更新）您可以使用CSS :last-child选择器。例如：

＆＃13;

＆＃13;

.container {
  width: 100%;
}

.row {
  width: 100%;
}
  
.col {
  width: 25%;
  text-align:center;
  float:left;
}

div.row:last-of-type div.col {
  background: red;
}

＆＃13;

  <div class="row">
    <div class="col">1</div>
    <div class="col">2</div>
    <div class="col">3</div>
    <div class="col">4</div>
  </div>

  <div class="row">
    <div class="col">1</div>
    <div class="col">2</div>
    <div class="col">3</div>
    <div class="col">4</div>
  </div>

  <div class="row">
    <div class="col">1</div>
    <div class="col">2</div>
    <div class="col">3</div>
    <div class="col">4</div>
  </div>

＆＃13;

＆＃13;

＆＃13;

使用:last-of-type和:last-child同时执行此操作，无容器：

<html>
<head>
<style> 
.row {
  width: 100%;
}

.col {
  width: 25%;
  text-align:center;
  float:left;
}

div.row:last-of-type div.col:last-child {
  background: red;
}
</style>
</head>
<body>

  <div class="row">
    <div class="col">1</div>
    <div class="col">2</div>
    <div class="col">3</div>
    <div class="col">4</div>
  </div>

  <div class="row">
    <div class="col">1</div>
    <div class="col">2</div>
    <div class="col">3</div>
    <div class="col">4</div>
  </div>

  <div class="row">
    <div class="col">1</div>
    <div class="col">2</div>
    <div class="col">3</div>
    <div class="col">4</div>
  </div>

</body>
</html>

似乎我不断提出问题，只选择最后一行的div：

div.row:last-of-type div {
  background: red;
}

Answer 3

如果你确定至少有12个，最多16个元素，并且每行将有4个元素，你可以使用伪选择器nth-child(n+13)：

* {
box-sizing: border-box;
}
html, body {
margin:0;

}


  
.col {
  width: 25%;
  float:left;
  border: 1px solid green;
}

.col:nth-child(n+13) {
  background: red;
}

<div class="container">
    <div class="col">1</div>
    <div class="col">2</div>
    <div class="col">3</div>
    <div class="col">4</div>
    <div class="col">5</div>
    <div class="col">6</div>
    <div class="col">7</div>
    <div class="col">8</div>
    <div class="col">9</div>
    <div class="col">10</div>
    <div class="col">11</div>
    <div class="col">12</div>
    <div class="col">13</div>
    <div class="col">14</div>
    <div class="col">15</div>
  </div>
</div>