我如何选择除具有特定类的div内的那些元素以外的所有元素 [英] How can I select all elements except those inside divs with particular classes

问题描述

我想找到一种方法来选择所有汽车品牌，除了那些位于discontinued或scrapped类的div内的汽车.这是我的标记:

I'd like to find a way to select all the makes of cars except those that are inside a div with the class discontinued or scrapped. Here's my markup:

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>

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

As you can see above, I tried the following:

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

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

...but this still included FORD, SEAT, and BMW.

推荐答案

不幸的是，CSS选择器无法遍历父元素，因此，如果您只是尝试以不同的方式设置它们的样式，则可能需要颠倒您的思维过程并选择那些是 .discontinued或.scrapped并应用覆盖样式:

Unfortunately CSS selectors cannot traverse up parent elements, so if you are just trying to style them differently you may want to reverse your thought process and select ones that are .discontinued or .scrapped and apply overriding styles:

.model {
  padding-left: 10px;
}

.make {
  color: green;
}

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

<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">SEAT</div>
            <div class="model">IBIZA</div>
        </div>
    </div>
</div>
<div class="car">
    <div class="make">HONDA</div>
    <div class="model">INTEGRA</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内的那些元素以外的所有元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！