CSS 星选择器是否被认为有害（以及为什么）？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1714096/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is the CSS star selector considered harmful (and why)?
提问by gpilotino
Does the star selector in CSS affect page rendering performance?
CSS 中的星星选择器会影响页面渲染性能吗？
Are there any caveats using it?
使用它有什么注意事项吗？
* {
margin:0;
padding:0;
}
回答by anddoutoi
When it comes to performance, Steve Souders is theman:
谈到性能，史蒂夫·苏德斯 (Steve Souders) 就是这样的人：
Shameless quote from one of the reports:
来自其中一份报告的无耻引述：
The key to optimizing CSS selectors is to focus on the rightmost selector, also called the key selector (coincidence?). Here's a much more expensive selector: A.class0007 * {}. Although this selector might look simpler, it's more expensive for the browser to match. Because the browser moves right to left, it starts by checking all the elements that match the key selector, “*“. This means the browser must try to match this selector against all elements in the page.
优化 CSS 选择器的关键是关注最右边的选择器，也称为键选择器（巧合？）。这是一个更昂贵的选择器：A.class0007 * {}。虽然这个选择器可能看起来更简单，但浏览器匹配的成本更高。因为浏览器从右向左移动，它首先检查与键选择器“*”匹配的所有元素。这意味着浏览器必须尝试将此选择器与页面中的所有元素进行匹配。
[bold emphasis mine]
[粗体强调我的]
回答by gpilotino
For some properties using *can produce unexpected results.
对于某些属性使用*会产生意想不到的结果。
* { color: blue }
li { color: red }
Now given <li><i>text</i></li>, the text will be blue!
现在给出<li><i>text</i></li>，文本将是蓝色的！
回答by Pete OHanlon
One view is that it's not so much that the * is a performance problem, it's that good old favourite - there's an IE issue with it. It affects IE 5, 5.5 and 6 as well as Macintosh variants. Basically, there is something called the HTML star selector bug which applies as follows:
一种观点认为 * 并不是一个性能问题，它是一个很好的老最爱——它有一个 IE 问题。它会影响 IE 5、5.5 和 6 以及 Macintosh 变体。基本上，有一种叫做 HTML 星选择器错误的东西，其应用如下：
* html
This should be interpreted as no element match because html is root and cannot be a child element. IE interprets this as html.
这应该被解释为没有元素匹配，因为 html 是根元素，不能是子元素。IE 将此解释为 html。
* * body
Again, should match to no element because body cannot be a grandchild element - even though it is a child element of HTML. IE interprets this as * body.
同样，应该不匹配任何元素，因为 body 不能是孙元素 - 即使它是 HTML 的子元素。IE 将其解释为 * body。
* html body
This should match no element, but IE interprets this as html body.
这应该不匹配任何元素，但 IE 将其解释为 html 正文。
The performance side is usually treated that applying * only means that the style applies to every element in a page. I rarely find that this is an issue in its own right - the point at which it would become an issue means that you've probably got way too much markup in there anyway. Similarly, as it applies to everything, it means you need to increase your code to cope with elements that shouldn't have that style. As with everything else, it's up to you to decide what the tradeoffs and balance should be.
性能方面通常认为应用 * 仅意味着该样式适用于页面中的每个元素。我很少发现这本身就是一个问题 - 它会成为一个问题的点意味着你可能有太多的标记。同样，由于它适用于所有事物，这意味着您需要增加代码以处理不应该具有该样式的元素。与其他所有事情一样，由您决定权衡和平衡应该是什么。
回答by F.P
Since I'm using the exact same rule in every of my projects and none have serious perfomance issues, I'd say: No, not as far as I know.
因为我在我的每个项目中都使用完全相同的规则并且没有一个严重的性能问题，所以我会说：不，据我所知。
