3

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

换句话说，性能方面*:after和*性能方面有什么区别？

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

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

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

及其资源成本。

谢谢。

4

2 回答 2

4

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

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

当涉及到伪元素时，术语“键选择器”的定义并不明确，而且与主题选择器的概念不同，它实际上是一个实现细节。如果“键选择器”的意思是“表示被渲染的框的选择器”，那么我想您可以说伪元素是键选择器。不过，我不熟悉实现细节，因为我不是实现者。

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

  1. 尝试将元素与选择器匹配，暂时忽略伪元素（在本例中为*）。

  2. 如果元素与选择器匹配，则尝试创建一个伪元素框作为该元素框的子元素（在生成伪元素的情况下，如:before和:after）如果适用（某些元素无法生成伪元素）。

  3. 将样式应用于伪元素框并将其渲染为与任何其他框一样。

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

由于我们讨论的是性能，请记住匹配一个元素*几乎是瞬时的，因为它基本上是保证匹配；只有当你将它与更复杂的选择器结合使用时，它才会在选择器级别上变得更加昂贵，虽然最终它的性能随着你在 DOM 中拥有的元素数量而增长最大，但它仍然没有实际渲染样式那么昂贵除非你有成千上万的元素。

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

#mycanvas *:after, 
#mycanvas *:before {
   content:'';
}
于 2013-09-03T08:25:44.803 回答
3

问题编辑后

刚刚清楚地了解了您在这里要问的内容，因此当您使用 时*，无论如何它都会选择元素，但这并不精确，因为它会选择所有元素。如果您愿意，您可以使用类似的东西

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

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

.container * {
   color: red;
}

演示

问题编辑前

我无法理解您在这里问什么，但是两个选择器完全不同..它们用于不同的目的，我不知道这是否是您的问题中的错字，但 using*:after经常与contentwhich 必须是一起使用嵌入:before或:after.

所以，例如

*:after {
    content: " <";
}

演示

当您使用它时，* .after, 将选择具有类的元素.after

* .after {
    color: red;
}

演示 2

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

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

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

于 2013-09-03T08:13:43.920 回答