如何解决CSS nth-child每3个项目
我有一个小问题。我想每3个项目设置样式。很难解释,所以我想用图像来解释。
如您所见,我想每3个项目将背景设置为红色。我们可以这样看:
红色红色红色
白色白色白色
红色红色红色
白色白色红色
如何使用CSS做到这一点?我不想为此问题添加额外的类。谢谢:)
解决方法
您可以简单地使用JS过滤元素。
let elementsArray=document.getElementsByClassName("coloredDiv");
let i=3;
while(i<=elementsArray.length){
elementsArray[i].style.backgroundColor="blue"
if(i%3===2)
i=i+4;
else
i++
}
.container{
display:flex;
flex-direction:colomn;
width:100px;
height:100px;
flex-wrap:wrap;
justify-content:space-between;
}
.coloredDiv{
width:30px;
height:30px;
background-color:red;
}
<div class="container">
<div class="coloredDiv">
</div>
<div class="coloredDiv">
</div>
<div class="coloredDiv">
</div>
<div class="coloredDiv">
</div>
<div class="coloredDiv">
</div>
<div class="coloredDiv">
</div>
<div class="coloredDiv">
</div>
<div class="coloredDiv">
</div>
<div class="coloredDiv">
</div>
</div>
,
您尚未指定是TABLE还是DIV-TABLE清除。如果是表格,则可以使用偶数和奇数规则为元素着色:
简单的HTML表:
<table>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</table>
和CSS代码:
td {
height: 50px;
width: 50px;
border: none;
}
tr:nth-child(even) {
background: #FFF;
}
tr:nth-child(even) > td {
border: 1px solid black;
}
tr:nth-child(odd) {
background: #F00;
}
,
使用CSS网格对框进行布局,并使用<An+B>
表示法来选择每隔3行的框。
body {
display: flex;
}
.container {
display: grid;
grid-template-columns: repeat(3,auto);
gap: 10px;
margin: auto;
}
.box {
background: red;
height: 100px;
width: 100px;
}
.box:nth-child(6n),.box:nth-child(6n - 1),.box:nth-child(6n - 2) {
border: solid 1px black;
background: transparent;
}
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。