将相同的样式应用于父级和嵌套的子级

Question

我有以下css规则

* {
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
}

我还想将相同的样式规则应用于*::after和*::before，并且我可以通过*, *::after, *::before {}来做到这一点。然而，我想让它与我所拥有的其他嵌套的scs保持一致，因此我试图找出如何嵌套这些伪元素，同时将相同的样式应用于所有3个选择器。

Answer 1

您可以这样使用父选择器：

* {
&, &::after, &::before {
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
}
}

它将编译为：

*, *::after, *::before {
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
}