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

Question

CSS明星选择器被认为是有害的（以及为什么）？CSS中的星形选择器是否会影响页面渲染性能？是否有任何警告使用它？* {   margin:0;   padding:0;}

Answer 1

当涉及到性能，史蒂夫Souders的是该男子：

• CSS选择器的性能影响

• 简化CSS选择器

其中一份报告的无耻报价：

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

Answer 2

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

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

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

Answer 3

一种观点认为*并不是说*是一个性能问题，而是一个很好的老头 - 它有一个IE问题。它影响IE 5,5.5和6以及Macintosh变体。基本上，有一种称为HTML星形选择器的bug，适用如下：

* html

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

* * body

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

* html body

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

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