Css 通用选择器*和伪元素

通用选择器

*

是否影响像

:before

和

:before

这样的伪元素

让我举一个例子：

执行此操作时：

* { box-sizing: border-box; }

…上述声明不会自动包括/影响伪元素，如

：before

和

：after

吗

或者，为了影响像

：before

和

：after

这样的伪元素，必须声明这一点吗

*, *:before, *:after { box-sizing: border-box; }

这有意义吗

---

我一直只使用

*{box size:border-box；}

，从未遇到过任何伪元素的问题。但我看到很多教程都在做

*，*：before，*：after

，但它们从来没有真正解释为什么在声明中包含

*：before，*：after

。

我只能引用以下内容：

写为“*”的通用选择器与任何元素类型的名称匹配。它匹配文档树中的任何单个元素

元素类型例如为

span

和

div

由于伪元素没有“元素类型”，并且不是文档树的一部分，所以答案似乎是否定的，它不包括伪元素

但是，由于伪元素从其“父元素”（至少是可继承的那些）继承CSS属性，并且通用选择器也会影响父元素，因此它会间接影响伪元素

• 颜色是遗传的
• 边框样式不是，并且

  ：：before

  元素没有边框

我只能引用以下内容：

写为“*”的通用选择器与任何元素类型的名称匹配。它匹配文档树中的任何单个元素

元素类型例如为

span

和

div

由于伪元素没有“元素类型”，并且不是文档树的一部分，所以答案似乎是否定的，它不包括伪元素

但是，由于伪元素从其“父元素”（至少是可继承的那些）继承CSS属性，并且通用选择器也会影响父元素，因此它会间接影响伪元素

• 颜色是遗传的
• 边框样式不是，并且

  ：：before

  元素没有边框

---

否，通用选择器

*

不会影响伪元素（通过间接方式除外，因为伪元素通常作为实际元素的子元素生成）

通用选择器与其他命名元素选择器（如

p

和

div

）一样，是一个：

简单选择器可以是类型选择器、通用选择器、属性选择器、类选择器、ID选择器或伪类

一个简单的选择器，也可以扩展为任何复杂的选择器，只针对实际的元素

虽然伪元素（与上面提到的伪类不同）可以与简单选择器一起出现在选择器符号中，但伪元素与简单选择器完全不同，因为它们代表不同的事物。不能使用简单选择器匹配伪元素，也不能将样式应用于CSS规则中的实际元素及其选择器中的伪元素

因此，为了匹配任何元素的

：before

和

：after

伪元素，是的，需要在选择器中包括

*：before、*：after

。仅使用

*{box size:border box；}

不会影响它们，因为

框大小调整

通常不会继承，因此，它们将保留默认的

框大小调整：内容框

您可能从未遇到过伪元素问题的一个可能原因是默认情况下它们以内联方式显示，因为

框大小调整

对内联元素没有任何影响

一些注意事项：

• 与任何其他简单选择器链一样，如果

  *

  不是唯一的组件，则可以省略它，这意味着

  *，：before，：after

  相当于

  *，*：before，*：after

  。也就是说，

  *

  通常是为了清晰起见而包括在内的-大多数作者在编写ID和类选择器时习惯于将

  *

  保留在外，而不是伪类和伪元素，因此符号对他们来说可能很奇怪，甚至是错误的（当它实际上完全有效时）

• 我上面链接到的当前选择器规范表示带有双冒号的伪元素。这是当前规范中引入的一种新符号，用于区分伪元素和伪类，但大多数

  框大小调整

  重置使用单冒号符号来适应IE8，IE8支持

  框大小调整

  ，但不支持双冒号符号

• 尽管

  *：before、*：after

  将样式应用于任何元素（包括

  html

  、

  head

  和

  body

  ）的各个伪元素，但在应用

  content

  属性之前，不会实际生成伪元素。您不必担心任何性能问题，因为没有任何性能问题。有关详细说明，请参见我对的回答

---

否，通用选择器

*

不会影响伪元素（通过间接方式除外，因为伪元素通常作为实际元素的子元素生成）

通用选择器与其他命名元素选择器（如

p

和

div

）一样，是一个：

简单选择器可以是类型选择器、通用选择器、属性选择器、类选择器、ID选择器或伪类

一个简单的选择器，也可以扩展为任何复杂的选择器，只针对实际的元素

虽然伪元素（与上面提到的伪类不同）可以与si一起出现在选择器符号中