CSS部分选择器与nth-of-type [重复]

Question

这个问题在这里已有答案：

• Can I combine :nth-child() or :nth-of-type() with an arbitrary selector? 5个答案

我试图使用部分选择器和nth-child在CSS中选择元素

[id^='selectID']:nth-of-type(even) {
 color: red;
 display block;
 height: 100px;
 width: 100px;
}

但是我想把这些物品选为奇怪的孩子甚至是孩子

• selectID1 - >应该得到这个类
• selectID2 - >不应该获得该类
• selectID3 - >应该得到这个类
• selectID4 - >不应该得到这个类

Answer 1

:nth-of-type不关心元素类型以外的任何内容，它可以问的是：

“我是我父元素中我类型的第n个元素吗？”

除非所有相关元素都是兄弟（即共享相同的父元素），否则目前无法使用CSS实现所需。

所以在这种情况下你的选择器会工作：

<div>
   <div id="selectID1"></div>
   <p>Test</p>
   <div id="selectID2"></div>
   <div id="selectID3"></div>
   <div id="selectID4"></div>
</div> 

在这个（以及许多其他）场景中，它不会按照您想要的方式工作：

<section>
   <div id="selectID1"></div>
</section>
<section>
   <p>Test</p>
   <div id="selectID2"></div>
</section>
<div id="selectID3"></div>
<div id="selectID4"></div>

Answer 2

使父元素成为ul和所有孩子li，您将能够使用：nth-​​child（）。这样你就可以轻松选择哪一款。

例：

1 2 3 4

ul:nth-child(even) li - 将选择2和4;

 ul:nth-child(2) li,
 ul:nth-child(4) li - will do the same.

希望有所帮助。