CSS child()示例
CSS child()示例
提问于 2019-01-14 07:50:04
给出下面的示例，每行都需要三个文本列，即三个句子，中间的三个句子也需要一个background-color。用nth-child()选择器可以做到这一点吗？
p {
display: inline-block;
width: 30%;
}
p:nth-child(2n+0) {
background: red;
}<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
<p>The fifth paragraph.</p>
<p>The sixth paragraph.</p>
<p>The seventh paragraph.</p>
<p>The eight paragraph.</p>
<p>The ninth paragraph.</p>
回答 3
Stack Overflow用户
发布于 2019-01-14 07:56:04
你可以用
p:nth-child(3n+2) {
background: red;
}Stack Overflow用户
发布于 2019-01-14 07:56:39
使用flex进行wrap，p使用p:nth-child(3n+2)
.wrap{
display:flex;
flex-wrap: wrap;
}
p {
flex: 1 0 33%;
}
p:nth-child(3n+2){
background: red;
}<div class="wrap">
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
<p>The fifth paragraph.</p>
<p>The sixth paragraph.</p>
<p>The seventh paragraph.</p>
<p>The eight paragraph.</p>
<p>The ninth paragraph.</p>
</div>
Stack Overflow用户
发布于 2019-01-14 07:54:50
虽然这是可以做到的-我不会这样做的。但是为了得到你想要的造型--如果数字和对齐总是和你在这里的一样，那么你可以这样做。
这将给出p元素的行，并在每一行的中间p元素上给出背景色，从而产生“列”效果。但是你真的应该使用一个更好的HTML结构。
p {
display:inline-block;
width:30%;
}
p:nth-child(2),
p:nth-child(5),
p:nth-child(8) {
background: red;
}<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
<p>The fifth paragraph.</p>
<p>The sixth paragraph.</p>
<p>The seventh paragraph.</p>
<p>The eight paragraph.</p>
<p>The ninth paragraph.</p>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54177506
复制相关文章
相似问题
腾讯云开发者
