<分区>
标签 html css css-selectors
<分区>
我还是个初学者，我找不到我代码中的错误。非常感谢您的帮助，这样我就可以正确地学习基础知识。
我想将每个偶数帖子中的 class="post-content"的背景更改为红色。
它不起作用。如果我只是在每个帖子中更改它，那就完全没问题了。但是当我使用子选择器或类型选择器时，它只会将其应用于两个帖子。
如果我尝试更改 class="container"，然后使用子选择器或类型选择器指定它适用于每个偶数帖子。为什么它在“post-content”类上不起作用？
HTML
<div id="content">
<div class="container">
<div class="post">
<div class="post-author">
<img src="me.png" alt="picture of the author">
<span>Me</span>
</div>
<p class="post-date">Today</p>
<h3 class="post-title">Post1</h3>
<div class="post-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<div class="container">
<div class="post">
<div class="post-author">
<img src="Ahmad.png" alt="picture of the guest author">
<span>Ahmad</span>
</div>
<p class="post-date">Today</p>
<h3 class="post-title">Post2</h3>
<div class="post-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</div>
CSS
.container:nth-of-type(2n+0) {
background-color: #f2f2f2;
}
`works (with child or type)`
.post-content {
background-color: red;
}
`works as well, all posts are now red`
.post-content:nth-of-type(2n+0){
background-color: red;
}
`does not work, both post backgrounds are still red (if I try the odd ones, none is red)`
最佳答案
nth-of-type 伪选择器应用于一组兄弟元素 see the docs .因为在你的 div 类 post 中只是类 post-content 的一个元素。此元素始终位于 0 位置，因此 2n+0(可以写成 2n 将匹配它们。
要实现您想要的效果，您应该使用:.container:nth-of-type(2n) .post-content { ... } 作为选择器。这将首先选择每个第二个带有 container 类的 div，然后将内容应用到带有 post-content 类的 div。要了解有关 CSS 选择器的更多信息，我建议您查看 https://flukeout.github.io/ ，您需要提供不同的选择器(包括嵌套选择器)才能通过关卡。
解释 (运行代码段以获得可视化示例)
.foo {
background-color: coral;
padding: 0.6em;
border: 1px solid #333333;
margin: 0.2em;
}
.foo:nth-of-type(2n) {
background-color: lightblue;
}
.foo .foo {
margin-left: 1.2em;
}<div class="wrapper">
<div class="foo">
Foo even (foo within .wrapper at index 0)
<div class="foo">
Foo even (foo within .foo, at index 0)
</div>
<div class="foo">
Foo odd (foo within .foo, at index 1)
</div>
<div class="foo">
Foo even (foo within .foo, at index 2)
</div>
</div>
<div class="foo">
Foo odd (foo within .wrapper at index 1)
</div>
<div class="foo">
Foo even (foo within .wrapper at index 2)
</div>
</div>在你的例子中发生了什么，是嵌套的例子，因为你所有的 .post-content 元素在他们的范围内，他们总是被选中。
关于html - 为什么我的特定选择器不适用于 nth-of-type() 和 nth-child()？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58579360/