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

CSS中的星形选择器是否会影响页面渲染性能？（为什么）被认为是有害的CSS星形选择器？

有没有使用它的注意事项？

* { 
    margin:0; 
    padding:0; 
}

来源

2009-11-11 gpilotino

在你听到什么情况下，这是“有害”？以某些方式使用时，根据浏览器的不同可能会有不同的表现（例如，考虑'* html {}'）。 – Blixt 2009-11-11 09:42:14

我问这也是因为我看到“标准事实上”的CSS重置方法避免使用它。 – gpilotino 2009-11-11 10:42:43

当涉及到性能，史蒂夫Souders的是的人：

的：

Performance Impact of CSS Selectors

Simplifying CSS Selectors

从报告一个无耻报价优化CSS选择器的关键是专注于最右边的选择器, 也被称为密钥选择器（重合？）。这里有更多昂贵的选择器：A.class0007 * {}。虽然此选择器可能看起来更简单，但浏览器的价格更高。因为浏览器从右向左移动，它开始于检查所有匹配键选择器“*”的元素。这意味着浏览器必须尝试将此选择器与页面中的所有元素进行匹配。

[大胆重点煤矿]

来源

2009-11-11 10:12:17 anddoutoi

我也引用“很明显，CSS选择器与一个与许多元素相匹配的按键选择器会显着减慢网页速度。”有趣的阅读，谢谢。 – gpilotino 2009-11-11 10:46:14

我更喜欢这句话“基于这些测试，我有以下假设：对于大多数网站来说，优化CSS选择器可能带来的性能收益会很小，并且不值得花费。” – arkanciscan 2015-10-18 04:22:25

@arkanciscan这是idd非常真实。优化CSS选择器可能是过早优化的最佳案例之一。 – anddoutoi 2015-10-19 07:38:03

由于我使用的是在每一个我的项目完全相同的规则，并没有产生严重的性能比较的问题，我会说：不，不是因为据我所知。

来源

2009-11-11 09:37:14

一种观点认为，它不是那么多*是一个性能问题，这是很好的旧喜欢 - 它有一个IE问题。它影响IE 5,5.5和6以及Macintosh变体。基本上，有一些所谓的HTML明星选择错误，这适用如下：

* html

这应该被理解为没有元素匹配，因为HTML是根，不能是一个子元素。 IE将此解释为html。

* * body

再一次，应该匹配到没有元素，因为身体不能是孙子元素 - 即使它是HTML的子元素。 IE将此解释为* body。

* html body

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

性能方面通常认为应用*仅意味着该样式适用于页面中的每个元素。我很少发现这本身就是一个问题 - 它将成为一个问题的意义在于，无论如何你可能在这方面有太多的标记。同样，它适用于所有内容，这意味着您需要增加代码来处理不应该拥有该风格的元素。和其他一切一样，决定什么是权衡和平衡应该由您决定。

来源

2009-11-11 09:50:34

我不会说这是一个错误，但在这种情况下的开发人员错误 – Jonathan 2015-11-04 12:51:47

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

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

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

来源

2009-11-11 10:03:47

是的，但是当你设置'*'的属性时，你可能不会想到它*。用'*'和你很少使用的界面元素或元素，这是更真实的。 – Boldewyn 2009-11-11 10:15:54

@ ApoY2K：仅仅因为它的运作方式应该是这样，并不意味着它是预期的。当你有一个*选择器时很容易忘记它。当你记得时，你必须仔细考虑**每次你添加一个新的元素**来检查你是不是应用你不想要的样式。 – DisgruntledGoat 2009-11-11 10:40:45

@ApoY2k：当然，如果你是完美的，永远不会犯错误，你永远不会写出不符合预期的代码。否则，认为该颜色是从父代继承是合理的，这就是红色以外的文本是意外的。 – 2009-11-11 10:50:49

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

回答

相关问题