CSS 星形选择器是否被认为是有害的（为什么）？答案

【问题标题】：Is the CSS star selector considered harmful (and why)?CSS 星形选择器是否被认为是有害的（为什么）？
【发布时间】：2009-11-11 09:34:38
【问题描述】：

CSS 中的星形选择器会影响页面渲染性能吗？

使用它有什么注意事项吗？

* {
  margin:0;
  padding:0;
}

【问题讨论】：

您在什么情况下听说过它“有害”？当以某些方式使用时，它的行为可能因浏览器而异（例如* html {}）。
我问这个也是因为我看到“标准事实上的”css重置方法避免使用它。

标签： css

【解决方案1】：

在性能方面，Steve Souders 是人：

其中一份报告的无耻引用：

优化 CSS 选择器的关键是专注于最右边的选择器，也称为键选择器（巧合？）。这里还有更多昂贵的选择器：A.class0007 * {}。虽然这个选择器可能看起来更简单，它更贵匹配的浏览器。因为浏览器从右向左移动，它开始于检查所有匹配的元素键选择器，“*”。这意味着浏览器必须尝试匹配这个选择器中的所有元素页面。

[粗体强调我的]

【讨论】：

我还引用了“很明显，带有匹配许多元素的键选择器的 CSS 选择器会显着降低网页速度。”有趣的阅读，谢谢。
我更喜欢这句话 “基于这些测试，我有以下假设：对于大多数网站，优化 CSS 选择器可能带来的性能提升很小，而且不值得付出代价。”
@arkanciscan 这是非常真实的。优化 CSS 选择器可能是过早优化的最佳案例之一。
此外，2018 年与 2009 年的浏览器性能特征现在有很大不同。我想知道关于 * 性能的建议今天是否重要 - 如果浏览器优化到足以使其不重要，我不会感到惊讶事

【解决方案2】：

对于某些使用* 的属性可能会产生意想不到的结果。

* { color: blue }
li { color: red }

现在给定<li><i>text</i></li>，文本将是蓝色的！

【讨论】：

是的，但是当您设置“”的属性时，您可能不会想到。 '' 和界面元素或您很少使用的元素更是如此。
@ApoY2K：仅仅因为它可以正常工作，并不意味着它是预期的。当你有一个 * 选择器时，很容易忘记它。当您记住时，您必须每次添加新元素时都考虑一下，以检查您没有应用您不想要的样式。
@ApoY2k：当然，如果你是完美的并且从不犯错误，那么你就永远不会编写出超出预期的代码。否则，有理由认为颜色是从父级继承的，这就是为什么这个文本不是红色是出乎意料的。
怎么会出乎意料？ 有蓝色。那怎么了？
这不是一个意外的结果，星号明确表示所有元素都是蓝色的。如果您从父选择器属性中推断它们可能是红色的，那么这就是对 css 的理解不足

【解决方案3】：

一种观点认为，* 与其说是性能问题，不如说它是旧时的最爱——它存在 IE 问题。它影响 IE 5、5.5 和 6 以及 Macintosh 变体。基本上，有一个叫做 HTML 星形选择器的错误，它的应用如下：

* html

这应该被解释为没有元素匹配，因为 html 是根元素并且不能是子元素。 IE 将其解释为 html。

* * body

同样，应该不匹配任何元素，因为 body 不能是孙元素 - 即使它是 HTML 的子元素。 IE 将其解释为 * 正文。

* html body

这应该不匹配任何元素，但 IE 将其解释为 html 正文。

性能方面通常被认为只应用 * 意味着该样式适用于页面中的每个元素。我很少发现这本身就是一个问题——它会成为一个问题的那一点意味着你可能在那里有太多的标记。同样，由于它适用于所有内容，这意味着您需要增加代码以处理不应该具有该样式的元素。与其他所有事情一样，由您决定权衡和平衡应该是什么。

【讨论】：

在这种情况下我不会称其为错误，而是开发人员错误

【解决方案4】：

由于我在每个项目中都使用完全相同的规则并且没有一个存在严重的性能问题，我会说：不，据我所知。

【讨论】：