Question

我需要选择我的物品数量是奇数。无论元素类＆＃34; box-media2＆＃34;

任何人对此问题都有任何想法/建议，这是添加课程的一部分＆＃34; odd＆＃34; ？

＆＃13;

.box-media:nth-child(2n+1) {
  color: red;
}

.box-media2 {
  display: none;
}

＆＃13;

<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>

＆＃13;

Answer 1

您应该使用.box-media:nth-child(4n+1)来选择奇怪的.box-media孩子。

.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类的奇数孩子，这总是正确的你的情况。

有关MDN :nth-child选择器的更多信息。

选择器nth-child在CSS中产生奇怪的结果

1 个答案: