我有4行div,浮动。它的工作方式是每个div的宽度为25%,因此每行总有4个div。每行周围没有容器div。
我想知道是否有一种方法,通过CSS,只针对最后一行的div,无论是否有1或2或3或4个div(它会因站点是动态的而变化)。
我想也许有了n-child值可能会有一种方法,但我无法理解它。有什么想法吗?
答案 0 :(得分:3)
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>
&#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也可以用来玩其他风格。
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;
答案 1 :(得分:0)
(已更新)您可以使用CSS :last-child
选择器。例如:
.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;
使用: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;
}
答案 2 :(得分:0)
如果你确定至少有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>