(为什么)被认为是有害的CSS星形select器?

CSS中的星形select器会影响页面的渲染性能吗?

有没有使用它的警告?

* { margin:0; padding:0; } 

谈到表演,史蒂夫·苏德斯(Steve Souders)是这样一个人:

  • 对CSSselect器的性能影响
  • 简化CSSselect器

其中一份报告无耻地引述:

优化CSSselect器的关键是把重点放在最右边的select器 ,也称为键select器(巧合?)。 这是一个非常昂贵的select器:A.class0007 * {}。 虽然这个select器看起来可能更简单,但浏览器的匹配成本更高。 由于浏览器从右向左移动 ,因此首先检查与键select符“*”匹配的所有元素。 这意味着浏览器必须尝试将此select器与页面中的所有元素进行匹配。

[大胆强调我的]

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

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

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

有一种观点认为,性能问题并不是那么重要,而是一个很好的老习惯 – 这是一个IE问题。 它影响IE 5,5.5和6以及Macintosh变种。 基本上,有一种叫做HTML星形select器的错误,如下所示:

 * html 

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

 * * body 

同样,应该匹配到没有元素,因为身体不能成为孙子元素 – 即使它是HTML的子元素。 IE将此解释为* body。

 * html body 

这应该匹配没有元素,但IE解释为html身体。

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

由于我在每个项目中都使用完全相同的规则,而且没有任何严重的性能问题,所以我会说:不,据我所知。