Question

.thing {
  color: red;
}

/* Additional rules here to honour the below request. */

<div>
  <div class="thing">Should be red</div>
  <div class="thing">Should be red</div>
  <div class="thing">Should be red</div>
  <div id="Excluder">
    <div class="thing">Should not be red</div>
    <div class="thing">Should not be red</div>
    <div class="thing">Should not be red</div>
  </div>
</div>

我想使所有类别为thing的元素都具有红色，除了ID为Excluder的元素中的项目之外

CSS / SCSS可以实现这种功能吗？

Answer 1

您可以使用initial属性将.thing的子元素#Excluder设置为其初始值。

.thing {
  color: red;
}

#Excluder>.thing {
  color: initial;
}


/* Additional rules here to honour the below request. */

<div>
  <div class="thing">Should be red</div>
  <div class="thing">Should be red</div>
  <div class="thing">Should be red</div>
  <div id="Excluder">
    <div class="thing">Should not be red</div>
    <div class="thing">Should not be red</div>
    <div class="thing">Should not be red</div>
  </div>
</div>

Answer 2

Codepen演示：https://codepen.io/anon/pen/OeGvax

.thing {
  color: red;
}

#Excluder {
  .thing {
    color: blue;
  }
}

这会做你想要的。

如果您不想为#Excluder .thing设置任何颜色，只需将color属性设置为unset或initial。

#Excluder {
    .thing {
        color: unset;
    }
}

Answer 3

使用&变量重置.thing元素内#Excluder元素的颜色：

.thing{
    color: red;

    #Excluder > &{
        color: initial;
    }
}

SCSS / CSS不是ID元素的子元素的所有元素

3 个答案: