通用选择器(*)和伪元素(:before, :after)
通用选择器(*)是否扩大了影响力伪元素,如 :before 和 :after?例如,当使用:
* { box-sizing: border-box; }
会自动影响伪元素还是需要显式声明:
*, *:before, *:after { box-sizing: border-box; }
与直觉相反,通用选择器不会直接影响伪元素(间接继承除外)。这是因为 :before 和 :after 是与实际元素分开的实体,并由抽象表示。
像 * 这样的简单选择器只能定位实际元素,而不是伪元素。要设置 :before 和 :after 的样式,您必须将它们显式包含在选择器中。
尽管仅使用 * 可能没有遇到问题的原因可能是因为伪元素默认为内联显示,这不受影响通过框大小。
请记住,当使用多个简单选择器时,为了清晰起见,包括 * 是可选的。此外,虽然当前的选择器规范使用双冒号来表示伪元素,但较旧的浏览器支持使用单冒号表示法来重置框大小。
尽管 :before、:after 将样式应用于所有元素的伪元素,在声明 content 属性之前它们不会生成。这不会造成任何性能问题。
以上是通用选择器 (*) 是否会影响 :before 和 :after 等伪元素?的详细内容。更多信息请关注PHP中文网其他相关文章!