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

【问题标题】：How can I select all elements except those inside divs with particular classes如何选择除具有特定类的 div 内的元素之外的所有元素
【发布时间】：2022-04-06 21:00:22
【问题描述】：

我想找到一种方法来选择所有汽车品牌，除了那些在类 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。

【问题讨论】：

您可以向 div 添加另一个类名，其中包含不在这些特定 div 中的汽车类，然后您可以选择所有具有您的 css 的新类名的汽车类：.car。新类
@monala92 很遗憾，我无法修改 HTML。我希望有一种方法可以利用我所拥有的。
我已经编辑了我的示例以说明car 节点并不总是discontinued 和scrapped 的直接子节点，但可能仍然在其中。

标签： html css css-selectors

【解决方案1】：

不幸的是，CSS 选择器无法向上遍历父元素，因此如果您只是想对它们进行不同的样式设置，您可能想要扭转您的思维过程并选择 .discontinued 或 .scrapped 和应用覆盖样式：

.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 标记也选择了我忽略的 .car 元素 - 我添加了一个替代方法来将修改类放在 @987654327 @元素来解决这个问题。
我无法更改我的 HTML。此外，我不能依赖 .car 类作为第二级嵌套类 - 可能有另一个 div 包裹在它周围。
对不起，我的错。我将修改示例以反映这一点。想不出任何其他的限定词。
是的，我认为有两个单独的子句可能是解决这个问题的最佳方法，而不是试图在一个子句中完成。谢谢。

【解决方案2】：

你为什么不试试这个样式代码，

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

【讨论】：

答案不清楚它是否有效。使用 html 来显示实时工作示例会更好。