<分区>
标签 css
<分区>
我需要选择我的元素数量是奇数。无论元素类“box-media2”
有人对这个问题有任何想法/建议吗？
.box-media:nth-child(2n+1) {
color: red;
}
.box-media2 {
display: none;
}<div class="box-media">Test</div>
<div class="box-media2"></div>
<div class="box-media">Test</div>
<div class="box-media2"></div>
<div class="box-media">Test</div>
<div class="box-media2"></div>
<div class="box-media">Test</div>
<div class="box-media2"></div>
<div class="box-media">Test</div>
<div class="box-media2"></div>
<div class="box-media">Test</div>
<div class="box-media2"></div>
<div class="box-media">Test</div>
<div class="box-media2"></div>
<div class="box-media">Test</div>
<div class="box-media2"></div>最佳答案
你应该使用 .box-media:nth-child(4n+1) 来选择奇数个 .box-media child 。
.box-media:nth-child(4n+1) {
color: red;
}
.box-media2 {
display: none;
}<div class="box-media">Test</div>
<div class="box-media2"></div>
<div class="box-media">Test</div>
<div class="box-media2"></div>
<div class="box-media">Test</div>
<div class="box-media2"></div>
<div class="box-media">Test</div>
<div class="box-media2"></div>
<div class="box-media">Test</div>
<div class="box-media2"></div>
<div class="box-media">Test</div>
<div class="box-media2"></div>
<div class="box-media">Test</div>
<div class="box-media2"></div>
<div class="box-media">Test</div>
<div class="box-media2"></div>那是因为 .box-media:nth-child(2n+1) 搜索奇数子项(包括 .box-media 和 .box-media2 )，并将样式应用于具有 box-media 类的奇数子级，这在您的情况下始终为真。
更多关于 :nth-child 选择器的信息 MDN .
关于css - 选择器 nth-child 在 CSS 中产生奇怪的结果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43946062/