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

Question

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正文.

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