每八（8） [英] nth-child every eight (8)
本文介绍了每八（8）的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
■□■□
我需要每八个元素重复使用一个模式。
□■□■
我一直在想办法解决这个问题，但我似乎没有把它做好。
section {width：220px;} div {width：50px; height：50px;向左飘浮; margin-right：5px; margin-bottom：5px; background-color：yellow;} div：第n个孩子（4n），div：第n孩子（4n + 1）{background-color：green;}
< section> < 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>
解决方案
如果您必须保留< br> 元素，那么您不希望使用 n -child 作为< br> 将被视为子项。相反，您可以使用>第n种类型：
div：n （5n + 1），div：第n种类型（5n + 3）{
background-color：green;
$ / code> 示例：
div {width：50px; height：50px;显示：inline-block; （5n + 1），div：第n种类型（5n + 3）{background-color：green;}
< section> < DIV>< / DIV> < DIV>< / DIV> < DIV>< / DIV> < DIV>< / DIV> <峰; br> < DIV>< / DIV> < DIV>< / DIV> < DIV>< / DIV> < div>< / div>< / section>
b
$ b
基于你的问题中更新的信息，它看起来像更好的解决方案是 div：nth-of-type（8n + 1），div：nth-of-type（8n + 3），div： （8n + 6），div：第n种类型（8n + 8）{背景色：绿色; }
body {font-size：10pt ;} section {width：220px;} div {width：50px; height：50px;向左飘浮; margin-right：5px; margin-bottom：5px; （8n + 1），div：第n种类型（8n + 3），div：第n种类型（8n + 6），div：nth- （8n + 8）{background-color：green;}
<节> < 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> < 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> < DIV>< / DIV> < div>< / div>< / section>
I need to repeat a pattern every eight elements like this using nth-child.
■□■□
□■□■
I've been trying to figure out a formula for this but I don't seem to get it right.
section {
width: 220px;
}
div {
width: 50px;
height: 50px;
float: left;
margin-right: 5px;
margin-bottom: 5px;
background-color: yellow;
}
div:nth-child(4n), div:nth-child(4n+1) {
background-color: green;
}
<section>
<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>
解决方案
If you have to keep the <br> element then you don't want to use nth-child as the <br> will count as a child. Instead you can use nth-of-type:
div:nth-of-type(5n+1),div:nth-of-type(5n+3) {
background-color: green;
}
Example:
div {
width: 50px;
height: 50px;
display: inline-block;
background-color: yellow;
}
div:nth-of-type(5n+1),div:nth-of-type(5n+3) {
background-color: green;
}
<section>
<div></div>
<div></div>
<div></div>
<div></div>
<br>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
Based on the updated information in your question it looks like the better solution is div:nth-of-type(8n+1), div:nth-of-type(8n+3),div:nth-of-type(8n+6), div:nth-of-type(8n+8) { background-color: green; }
body {
font-size: 10pt;
}
section {
width: 220px;
}
div {
width: 50px;
height: 50px;
float: left;
margin-right: 5px;
margin-bottom: 5px;
background-color: yellow;
}
div:nth-of-type(8n+1),
div:nth-of-type(8n+3),
div:nth-of-type(8n+6),
div:nth-of-type(8n+8) {
background-color: green;
}
<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div>Should repeat here</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></div>
<div>Should repeat here</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>
这篇关于每八（8）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
