您可以为类组合创建 CSS/SCSS 规则吗？ [复制]答案

【问题标题】：Can you create a CSS/SCSS rule for a combination of classes? [duplicate]您可以为类组合创建 CSS/SCSS 规则吗？ [复制]
【发布时间】：2021-03-03 19:05:50
【问题描述】：

假设我有以下几点：

<div class="class1 class2">...</div>
<div class="class1 ...">...</div>

有没有办法制定一个 SCSS 规则，类似于“对于具有类 class1 和除 class2 之外的任何其他类的元素应用这些属性”。因此，如果默认情况下 div 将具有蓝色背景，我将能够编写类似这样的内容并使所有 class1 而不是 class2 的 div 具有红色背景。

.class1 && !.class2 { // invented syntax, of course
    background-color: red;
}

我知道还有其他方法可以实现这一点，但我很想知道您是否可以通过这种方式做到这一点。

【问题讨论】：

标签： css sass

【解决方案1】：

这不需要复杂的 sass 解决方案。您可以简单地使用 css :not() 选择器。请参阅下面的示例 -

.class1{
    color: red;
}

.class1:not(.class2){
    color: green;
}

<div class="class1 class2">
  class1 and class2
</div>
<div class="class1">
  class1 but not class2
</div>

编辑 - 上面的 sn-p 可能工作正常，但在下面的场景中可能会表现得很奇怪 -

.class1:not(.class2){
    color: green;
}

.class1{
    color: red;
}

.class2{
    color: blue;
}

.class3{
    color: black;
}

<div class="class1 class2">
  class1 and class2
</div>
<div class="class1">
  class1 but not class2
</div>
<div class="class1 class3">
  class1 and class 3 but not class2
</div>

.class3 选择器出现在 css 的后面，但第三个 div 中的文本颜色仍然保持绿色。这是因为:not() 选择器具有更多的特异性。要解决这个问题，您必须使用id 而不是class，如下所示 -

.class1:not(.class2){
    color: green;
}

.class1{
    color: red;
}

.class2{
    color: blue;
}

#id3{
    color: black;
}

<div class="class1 class2">
  class1 and class2
</div>
<div class="class1">
  class1 but not class2
</div>
<div class="class1" id="id3">
  class1 and class 3 but not class2
</div>

总之，:not() 伪选择器可以很好地适应您的情况，但您必须注意选择器的特殊性。

【讨论】：