Question

是否可以编写CSS规则来选择没有特定类的元素的第一个子节点？

示例：

<div>
    <span class="common-class ignore"></span>
    <span class="common-class ignore"></span>
    <span class="common-class"></span>
    <span class="common-class"></span>
</div>

在这种情况下，我想选择没有课程span的第一个ignore。我尝试了这个，但似乎没有用：

.common-class:first-child:not(.ignore) {
    ...some rules...
}

更新：

如果我将一个类添加到名为parent-class的父div中，则Jukka建议的选择器的修改版本可以正常工作，除非第一个span带有类ignore的第一个.parent-class > .common-class.ignore + .common-class:not(.ignore) { ...some rules... }没有。上述选择器如下：

{{1}}

Answer 1

此问题类似于CSS selector for first element with class，但第一个元素没有类。如上所述，:first-child:not(.ignore)表示一个元素，它是其父元素的第一个子元素，并且没有类＆＃34;忽略＆＃34;，而不是与选择器的其余部分匹配的第一个子元素。

您可以使用我在my answer中对链接问题描述的兄弟组合器的覆盖技术，将类选择器替换为包含类选择器的:not()伪类：

.common-class:not(.ignore) {
    /* Every span without class .ignore, including the first */
}

.common-class:not(.ignore) ~ .common-class:not(.ignore) {
    /* Revert above declarations for every such element after the first */
}

Answer 2

这会选择所有范围与.common-class且没有.ignore类。

span.common-class:not(.ignore) {
  color: blue;
}

但是，因为我们只想选择第一个，所以你可以覆盖跟随~选择器的兄弟姐妹。

span.common-class:not(.ignore) ~ span {
  color: black;   /* or   color: inherit; */
}

<强> jsBin demo

如果您已经在使用jQuery，也可以使用

完成

$("span.common-class:not(.ignore):first").css('color', 'blue');

Answer 3

不，这是不可能的。选择器:first-child:not(.ignore)选择一个元素，该元素是其父元素的第一个子元素，不属于类ignore。没有“第一类”选择器，也没有“第一类”选择器。

您可以使用选择器.ignore + :not(.ignore)，但它匹配任何不在类ignore中的元素，并紧跟该类中的元素。但它匹配太多，而不仅仅是第一个这样的元素。根据标记结构的不同，此选择器可能仍适用于特定情况，即使它不是对所提问题的答案。

Answer 4

您不必使用类选择div。那么像nth-child等其他css解决方案呢？当然，这需要了解文档结构。

CSS - 没有特定班级的第一个孩子

4 个答案: