我可以组合两个不同的 DOM 来组合选择器 :nth 子项和组合索引吗?

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 与类"一"和"二"组合，然后在这两个类之间使用具有组合索引的第 n 个子项吗？

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