CSS 规则排除父类

Question

如何编写一个 CSS 规则来选择

div.box

内所有 不的

.container

？

以下代码片段不起作用，因为

div

内有一个

.container

而没有

div.container

。

div:not(.container) .box {
   background:red;
}

<div class="box">box</div> <!-- select this -->
<div class="container">
    <div>txt</div>
    <div><div class="box">box</div></div>
</div>
<div class="box">box</div> <!-- select this -->

Answer 1

如果您不想覆盖每个属性，我看到的唯一方法是为特定容器内的框提供一个附加类。

.box:not(.exclude) {
  background: red;
}

<div class="box">box</div> <!-- select this -->
<div class="container">
    <div>txt</div>
    <div><div class="box exclude">box</div></div>
</div>
<div class="box">box</div> <!-- select this -->

Answer 2

在某种程度上，您要求的 CSS 规则有点倒退。您应该从最通用的规则开始，然后添加更具体的规则。对于您的情况，您应该执行以下操作：

/* Generic Box styles */
.box
{
  border: 1px solid black;
}

/* Boxes in a container */
.container .box
{
  color: blue;
}

<div class="box">Generic Box</div>
<div class="container">
  <div class="box">I'm in a container</div>
</div>

Answer 3

选择全部

div.box

或全部

div

不在

.container

内？ 您要求的内容和您所说的要在 html 代码示例中选择的内容不是同一件事。 也就是说，你的 CSS 选择器只是乱序。 尝试：

div.box:not(.container) {
   background:red;
}

和

<div class="box">box</div>
<div class="container">
    <div>txt</div>
    <div><div class="box">box</div></div>
</div>
<div class="box">box</div>

如果你想要所有的div，只需删除

.box

Answer 4

您可以将

:not()

选择器应用于 child，其中包含有关父级的条件：

div.box:not(div.container *) {
   background:red;
}

<div class="box">box</div> <!-- select this -->
<div class="container">
    <div>txt</div>
    <div><div class="box">box</div></div>
</div>
<div class="box">box</div> <!-- select this -->

摘自 Mozilla 文档：

:not()

是否定伪类，它选择与指定选择器不匹配的元素。因此，您使用 :not() 将样式应用到指定选择器排除的元素。

关键是，它需要任何有效的CSS选择器，而不仅仅是具有仅引用最终子元素的属性的选择器。在这种情况下，它是

div.container *

，这意味着“任何不在具有

div

类的

container

内的元素”。因此，由于它位于

:not()

中，因此它将排除那些。