Question

说我有这样的规则：

.classA, .classB, li, .classC :nth-child(2) {
    margin-top: 5px;
}

这会将margin-top规则应用于所有这些类和项目。但是，假设我想使用选择器并将规则应用于除了与上述规则匹配的第一个元素之外的所有元素。例如，如果我有：

<div class="classA"></div>
<div class="classB"></div>
<div class="classC">
    <ol>
        <li></li>
        <li></li>
    </ol>
</div>

我希望规则只适用于B类和两个列表项，而不是A类，它是所列类型的第一个元素，而不是ol，它根本不在列出的类型中。有没有办法将not：first-child选择器应用于类列表而不仅仅是一个类？

另一个例子：

<div class="classB"></div>
<div class="notInList"></div>
<div class="classA"></div>

应该只将规则应用于第三个div，classA，而不是第一个div（因为它是第一个匹配指定的列表）或第二个div（因为它不在列表中）。

Answer 1

有没有办法将not：first-child选择器应用于类列表而不仅仅是一个类？

没有

这样做的方法是让你小组中的所有内容都成为一个共同的类：

＆＃13;

div {
    height: 50px;
    width: 50px;
    margin: 2px;
}
.classA, .classB, .classC {
    background-color: blue;
}
.fun-times:not(:first-child) { 
    background-color: red;
}

＆＃13;

<div class="classA fun-times"></div>
<div class="classB fun-times"></div>
<div class="classC fun-times"></div>

＆＃13;

Answer 2

它可以做到这一点

div:not(:first-child) { 
   background-color: red
}

Answer 3

您需要引用列表的父元素：

.collection > :not(:first-child) {
     background-color: aqua;
 }

<div class="collection">
    <div class="classB">a</div>
    <div class="notInList">b</div>
    <div class="classA">c</div>
</div>

如果您真的只想在div中选择通配符第一个元素，那么您可以这样做，无论它们没有类，还是不同的元素，如span或div。我们正在使用＆gt;仅选择直接子项的运算符。您可以使用以下通配符伪元素：

.collection > :first-child {
     background-color: aqua;
}

跨多个类的CSS选择器

3 个答案: