Question

我特别想知道的是*:after有多贵，资源方面。在这种情况下，伪元素会成为键选择器吗？或者客户端是否会抓住所有元素？

换句话说，*:after和*表现之间有什么区别？

[编辑。愚蠢的例子。我的坏。]

为了澄清，我正在尝试仅使用css绘图，并发现自己使用了很多伪元素。如果我可以通过写作来节省一些时间，只是徘徊

*:after, 
*:before {
   content:'';
}

及其资源成本。

感谢。

Answer 1

在这种情况下，伪元素会成为键选择器吗？

从技术上讲，选择器的主题是*，意味着*匹配的任何元素都将是生成伪元素的元素。

当涉及伪元素时，术语“键选择器”没有明确定义，而且与主题选择器的概念不同，它实际上是一个实现细节。如果“键选择器”表示“选择器表示呈现的框”，那么我认为你可以说伪元素是键选择器。但是，我不熟悉实现细节，因为我不是实现者。

无论哪种方式，都可以安全地假设客户端遍历DOM，并且对于它挑选的每个元素都是如此：

尝试将元素与选择器匹配，暂时忽略伪元素（在本例中为*）。
如果元素与选择器匹配，则尝试创建一个伪元素框作为此元素框的子元素（对于生成的伪元素，如:before和:after）如果它适用（某些元素不能生成伪元素）。
将样式应用于伪元素框并将其渲染为与任何其他框一样。

两个选择器之间的区别在于前者包含伪元素，而后者不包含伪元素。由于它们做了根本不同的事情，因此按性能比较它们是不公平的。但是，它们都做尝试匹配DOM中的任何元素，因为它们都使用相同的catch-all选择器*，因此除非进行任何特殊优化，否则可以安全地假设唯一的开销与*:after一起出现的是实际生成和渲染伪元素。

由于我们讨论的是性能问题，请记住，将元素与*匹配几乎是即时的，因为它基本上是保证匹配;只有当你将它与更复杂的选择器结合起来时才会在选择器级别上变得更加昂贵，并且最终它的性能随着DOM中的元素数量而变得最大，但它仍然不像实际渲染样式那么昂贵除非你有成千上万的元素。

至于你的用例，我的意见是你通常不需要为每个元素创建伪元素。如果您正在使用CSS绘制内容，请查看是否可以按上下文限制选择器，以避免在整个DOM中呈现不必要的框，例如如果您只在具有特定ID的元素中绘图：

#mycanvas *:after, 
#mycanvas *:before {
   content:'';
}

Answer 2

编辑问题后

刚刚清楚地了解了你在这里要问的内容，所以当你使用*时，无论如何都要选择元素，但是因为它选择了所有元素，所以不会很精确。你想要的，你可以使用像

这样的东西

.container *:not(span) {
   color: red;
}

或（但下面将选择嵌套在.container内）的所有元素

.container * {
   color: red;
}

Demo

编辑问题之前

我无法理解你在这里问的是什么，但两个选择器都完全不同 ..它们用于不同的目的，我不知道你的问题是否是一个错字，但使用*:after的{{1}}通常与content一起使用，必须嵌入:before或:after。

所以，例如

*:after {
    content: " <";
}

Demo

当您使用此* .after时，将选择具有类.after

的元素

* .after {
    color: red;
}

Demo 2

就优化而言，我不认为在一般网站中使用*是一个巨大的性能问题，我经常使用下面的选择器来保存属性，如

* {
   margin: 0;
   padding: 0;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
}

此外，最后但并非最不重要，我没有找到任何使用*:after的理由，因为您不会使用:after为每个元素嵌入一些内容。

浏览器如何呈现伪元素选择器？

2 个答案: