html - 如何使用非选择器为元素添加CSS

Question

我在我的元素中使用 sass 来应用 css 样式，这里我有 div 项，其中所有 div 都具有相同的类，除了少数 div，

例子:html

<div class="wrapper-col"><p>jakajsf</p></div>
<div class="wrapper-col"><p>jakajsf</p></div>
<div class="wrapper-col"><p>jakajsf</p></div>
<div class="wrapper-col"><p>jakajsf</p></div>
<div class="wrapper-col not-wrap"><p>jakajsf</p></div>
<div class="wrapper-col"><p>jakajsf</p></div>
<div class="wrapper-col"><p>jakajsf</p></div>
<div class="wrapper-col"><p>jakajsf</p></div>
<div class="wrapper-col"><p>jakajsf</p></div>
<div class="wrapper-col not-wrap"><p>jakajsf</p></div>
<div class="wrapper-col"><p>jakajsf</p></div>

上面的 html 有多个带有类名 wrapper-col 的 div，但是很少有 div 也有类 not-wrap，我这里有 scss，我想在其中应用类名 wrapper 的样式-col 但不是 not-wrap 类而不修改 HTML

这是我尝试过的方法，但它对我不起作用。

SCSS:

.wrapper-col{
    &:not(.not-wrap){
        p{
            /* styles here*/
        }
    }
}

Answer 1

您传递的示例工作正常!

以添加边框为例，你会看到:https://jsfiddle.net/o7hjv1ts/1/

.wrapper-col{
    &:not(.not-wrap){
        p{
            border: 1px solid red;
        }
    }
}