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

即可

CSS规则排除父类

3 个答案: