Question

有没有解决方法如何转换它：

[class*="needle"]:not([class*="__front"], [class*="__back"]) {
  position: absolute;
}

到此：

[class*="needle"]:not([class*="__front"]):not([class*="__back"]) {
  position: absolute; }

使用SCSS编译器？

我只得到：

[class*="needle"]:not([class*="__front"], [class*="__back"]) {
  position: absolute;
}

大多数浏览器都无法解释。非常感谢。

Answer 1

我会利用SCSS开发它的原因，使语法漂亮且易于理解。

[class*="needle"]{
    &:not([class*="__front"]){
        &:not([class*="__back"]) {
              position: absolute;
        }
    }
}

应该有效。这里，&用于指代父项。编译后，生成的CSS将是

[class*="needle"]:not([class*="__front"]):not([class*="__back"]) {
  position: absolute; 
}

抱歉，我读错了这个问题。 SCSS无法进行上述转换，因为这不是正确的CSS语法，也不是SCSS语法。

目前，:not()选择器仅执行简单匹配。上述语法对于4级选择器是有效的，它处于工作草案中，并且在任何浏览器中大多不可用。

另外，

<Selector>:not(<Condition1>):not(<Condition2>) {
  position: absolute; 
}

不是，

<Selector>:not(<Condition1>,<Condition2>) {
  position: absolute; 
}

当第一种方法充当AND时，第二种方式充当OR。