Question

我正在尝试使用部分选择器和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.

希望有帮助。

类型为nth的CSS部分选择器

2 个答案: