通用选择器*和伪元素

时间:2014-07-17 03:42:05

标签: css css-selectors pseudo-element

通用选择器*是否会影响:before:after等伪元素?

让我举个例子:

这样做时:

* { box-sizing: border-box; }

...上述声明是否自动包含/影响:before:after等伪元素?

或者,为了影响像:before:after这样的伪元素,必须声明这个吗?

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

这有意义吗?


我一直只使用* { box-sizing: border-box; },并且从未对伪元素产生过任何问题。但我看到很多教程正在进行*, *:before, *:after,但他们从未真正解释为什么它们在声明中包含*:before, *:after

2 个答案:

答案 0 :(得分:21)

不,通用选择器*不会影响伪元素(间接通过inheritance除外,因为伪元素通常作为实际元素的子元素生成)。

与其他命名元素选择器(如pdiv)一样,通用选择器是simple selector

  

简单选择器是类型选择器,通用选择器,属性选择器,类选择器,ID选择器或伪类。

一个简单的选择器,以及任何复杂的选择器,只针对实际的元素。

虽然伪元素(与上面提到的伪类相同)可以与简单选择器一起出现在选择器表示法中,但伪元素与简单选择器完全分开,因为它们{{ 3}},因此两者都代表不同的东西。您不能使用简单的选择器匹配伪元素,也不能将样式应用于CSS规则中的实际元素,并在其选择器中使用伪元素。

因此,为了匹配任何元素的:before:after伪元素,是的,需要在选择器中包含*:before, *:after。只有* { box-sizing: border-box; }才会影响他们,因为box-sizing通常不会被继承,因此他们会保留默认的box-sizing: content-box

您可能永远不会遇到任何伪元素问题的一个可能原因是它们默认显示为内联,因为box-sizing对内联元素没有任何影响。

一些注意事项:

  • 与任何其他简单选择器链一样,如果*不是唯一的组件,则可以将其保留,这意味着*, :before, :after等同于*, *:before, *:after。话虽如此,为了清楚起见,通常包括* - 大多数作者习惯在写ID和类选择器时离开*,而不是伪类和伪元素,所以这种符号可能看起来很奇怪甚至是错误的(当它实际上完全有效时)。

  • 我链接到上面的当前选择器规范表示具有双冒号的伪元素。这是当前规范中引入的用于区分伪元素和伪类的新符号,但大多数box-sizing重置使用单冒号表示法来容纳IE8,IE8支持box-sizing但不支持双冒号表示法

  • 虽然*:before, *:after将样式应用于任何元素的相应伪元素,其中包括htmlheadbody ,在应用content属性之前,实际上不会生成伪元素。您不必担心任何性能问题,因为没有。有关详细说明,请参阅我对represent abstractions of the DOM that are separate from actual elements的回答。

答案 1 :(得分:8)

我只能引用specification

  

通用选择器,编写" *",匹配任何元素类型的名称。它匹配文档树中的任何单个元素。

元素类型例如是spandiv

由于伪元素没有"元素类型"并且不是文档树的一部分,看起来答案是 no ,它不包含伪元素。

但是,由于伪元素从他们的" parent"继承CSS属性。 (至少是可继承的)并且通用选择器也会影响父级,间接会影响伪元素。

Example

  • 颜色是继承的
  • 边框样式不是,::before元素没有边框