程序问答   发布时间:2022-06-02  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了通用选择器*和伪元素大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

如何解决通用选择器*和伪元素?

开发过程中遇到通用选择器*和伪元素的问题如何解决?下面主要结合日常开发的经验,给出你关于通用选择器*和伪元素的解决方法建议,希望对你解决通用选择器*和伪元素有所启发或帮助;

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

通用选择器与其他命名元素选择器(例如p和)一样div,是一个简单的选择器:

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

然伪元素(它们是 作为伪类上面提到的相同的东西)可以一起简单选择器在选择符号出现,伪元素被完全从简单的选择器分开,因为它们表示从实际元素单独的DOM的抽象,因此两者都代表不同的事物。您不能使用简单的选择器来匹配伪元素,也不能将样式应用于选择器中带有伪元素的CSS规则中的实际元素。

因此,为了匹配:before:after任何元素的伪元素,是的,一个需要包含*:before, *:after在选择。拥有权限* { Box-sizing: border-Box; }不会影响它们,因为Box-sizing通常不会继承它们,因此,它们将保留default Box- sizing: content-Box

您可能永远不会对伪元素产生任何问题的一个可能原因是,它们默认情况下以内联方式显示,因为Box-sizing对内联元素没有任何影响。

一些注意事项:

  • 与其他所有简单选择器链一样,如果*不是唯一选择器,则可以将其省略,这*, :before, :after等效于*, *:before, *:after。话如此,*为了清楚起见,通常将其包括在内-大多数作者*在编写ID和类选择器时都习惯于省略,但不编写伪类和伪元素,因此对于他们来说,这种表示法似乎有些奇怪甚至是错误的(实际上是完全有效的)。

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

  • *:before, *:after样式应用于各自的伪元素 的任何 元素,其中包括HTMLheadbody,伪元素将直到应用实际上不能产生content财产。您不必担心任何性能问题,因为没有任何问题。。

解决方法

通用选择器是否*会影响伪元素,例如:before:after

让我举一个例子:

执行此操作时:

* { box-sizing: border-box; }

......没有上述声明包括自动/影响伪元素,如:before:after呢?

或者,为了影响诸如:before和的伪元素:after,必须声明这一点?

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

这有意义吗?


我一直只* { box-sizing: border-box; }使用伪元素,而从来没有任何问题。但是我看到许多教程在做,*,*:after但是它们从没有真正解释为什么将它们包含*:before,*:after在声明中。

大佬总结

以上是大佬教程为你收集整理的通用选择器*和伪元素全部内容,希望文章能够帮你解决通用选择器*和伪元素所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。