Question

我想找到一种方法来选择除discontinued或scrapped类之外的div内的所有汽车品牌。这是我的标记：

div:not(.discontinued):not(.scrapped) > .make {
    color: green;
}

<div class="car">
    <div class="make">NISSAN</div>
    <div class="model">MICRA</div>
</div>
<div class="discontinued">
    <div class="car">
        <div class="make">FORD</div>
        <div class="model">MONDEO</div>
    </div>
</div>
<div class="scrapped">
    <div class="car">
        <div class="make">SEAT</div>
        <div class="model">IBIZA</div>
    </div>
</div>
<div class="scrapped">
    <div class="preowned">
        <div class="car">
            <div class="make">BMW</div>
            <div class="model">100</div>
        </div>
    </div>
</div>
<div class="car">
    <div class="make">HONDA</div>
    <div class="model">INTEGRA</div>
</div>
</div>
<div class="car">
    <div class="make">PEUGEOT</div>
    <div class="model">206</div>
</div>
<div class="car">
    <div class="make">TOYOTA</div>
    <div class="model">COROLLA</div>
</div>

正如您在上面看到的，我尝试了以下操作：

div:not(.discontinued):not(.scrapped) > .make

...但是它仍然包括FORD，SEAT和BMW。

Answer 1

不幸的是，CSS选择器无法遍历父元素，因此，如果您只是尝试以不同的方式设置父元素的样式，则可能需要反转思路并选择 .discontinued或{{ 1}}并应用替代样式：

.scrapped

.model {
  padding-left: 10px;
}

.make {
  color: green;
}

.scrapped .make,
.discontinued .make {
  color: red;
}

如何选择除具有特定类的div内的元素以外的所有元素

1 个答案: