我可以组合两个不同的DOM来组合选择器：nth-​​child和组合索引吗？

Question

假设我有这种html

<div class="one">
   <span>1</span>
   <span>2</span>
   <span>3</span>
</div>
<div class="two">
   <span>4</span>
   <span>5</span>
   <span>6</span>
</div>

css代码在

之下

span:nth-child(2),
span:nth-child(4),
span:nth-child(6){
   background-color:red;
}

这是我想要的，使用上面的css

<div class="one">
   <span>1</span>
   <span>2</span> <!--Become red-->
   <span>3</span>
</div>
<div class="two">
   <span>4</span> <!--Become red-->
   <span>5</span>
   <span>6</span> <!--Become red-->
</div>

我可以将div与＃34; one＆＃34;和＆＃34;两个＆＃34;，然后在这两个类之间使用具有组合索引的nth-child？

Answer 1

您需要在div.one和div.two中为跨度定义不同的选择器才能实现此目的。

像这样：

.one span:nth-child(2) {
    background-color: red;
}

和

.two span:nth-child(1), .two span:nth-child(3) {
    background-color: red;
}