具有第 n 个类型的 CSS 部分选择器 [重复]答案

【问题标题】：CSS Partial selectors with nth-of-type [duplicate]具有第 n 个类型的 CSS 部分选择器 [重复]
【发布时间】：2019-02-28 03:40:17
【问题描述】：

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

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

但我想将项目选择为奇数子或偶数子

selectID1 --> 应该得到类
selectID2 --> 不应该得到类
selectID3 --> 应该得到类
selectID4 --> 不应该获取类

【问题讨论】：

你的标题是nth-of-child。 CSS 中不存在这样的选择器。在您的介绍性文字中，您说使用部分选择器和nth-child（没有部分选择器之类的东西，您的意思是属性选择器吗？）。那么在你的代码中，它突然变成了:nth-of-type(even)。你确定你知道你在问什么？

标签： javascript html css css-selectors

【解决方案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>

【讨论】：

【解决方案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.

希望对您有所帮助。

【讨论】：