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

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

的父 div 添加一个类，则 Jukka 建议的选择器的修改版本会起作用，除非第一个带有

parent-class

类的

span

在第一个不带类的

ignore

之后。上述选择器如下：

.parent-class > .common-class.ignore + .common-class:not(.ignore) {
    ...some rules...
}

Answer 1

这个问题类似于第一个带有类的元素的CSS选择器，除了第一个元素没有类。如前所述，

:first-child:not(.ignore)

表示一个元素，该元素是其父级的第一个子级，并且不具有“ignore”类，而不是与选择器的其余部分匹配的第一个子级。

您可以使用我在链接问题的我的答案中描述的同级组合器的覆盖技术，将类选择器替换为包含类选择器的

: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

类的

all

范围。

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

但是，因为我们只想选择第一个，所以您可以使用

~

选择器覆盖后面的同级。

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

jsBin 演示

---

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

来完成

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

Answer 3

不，这是不可能的。选择器

:first-child:not(.ignore)

选择一个元素，该元素是其父元素的第一个子元素，并且不属于类

ignore

。没有“一流”选择器，也没有“非一流”选择器。

您可以使用选择器

.ignore + :not(.ignore)

，但它会匹配任何不属于

ignore

类的元素，并紧跟在该类中的元素之后。但它匹配的太多了，而不仅仅是此类元素中的第一个。根据标记结构，此选择器可能仍然适合特定情况，即使它不是所提出的一般问题的答案。

Answer 4

您不必使用类来选择 div。其他 css 解决方案（例如 nth-child 等）怎么样？当然，这需要文档结构的知识。

Answer 5

div.someClass + div:not(.someClass) {...}

这将选择第一个没有

someClass

的 div，紧随其后的是带有

someClass

的 div。希望它能有所帮助，即使它不会在存在多个“类+无类对”的情况下挑出第一个无类 div 出现。 （运行片段查看示例）

 body{background-color:black; color:white}
div.someClass {background-color:darkgreen}
div.someClass + div:not(.someClass) {background-color:brown}

<div class="someClass">some class</div>
<div class="someClass">some class</div>
<div>no-class following div.someClass</div>
<div>no class</div>
<div>no class</div>
<div class="someClass">some class</div>
<div>no-class following div.someClass again!</div>
<div>no class</div>
<div>no class</div>
<div>no class</div>