我正试图在每月收到数百万页面浏览量的页面中找到一些简单的客户端性能调整。我担心的一个问题是 CSS 通用选择器 (*) 的使用。
例如，考虑一个非常简单的 HTML 文档，如下所示:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Example</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph of text.</p>
</body>
</html>
通用选择器会将上述声明应用于 body、h1 和 p 元素，因为它们是文档中唯一的元素.
一般来说，我会从以下规则中看到更好的性能吗:
body, h1, p {
margin: 0;
padding: 0;
}
或者这会产生完全相同的净效果吗？
通用选择器是否执行了我可能没有意识到的更多工作？
我意识到此示例中的性能影响可能非常小，但我希望学到一些可能会在实际情况下带来更显着性能改进的东西。
我不打算在文档后面用其他样式覆盖通用选择器规则中的样式 - 即，将其用作快速但肮脏的重置样式表。实际上，我正在尝试完全按照我的预期使用通用选择器 - 将规则集应用于文档中的所有元素，一劳永逸。
最终，我希望确定通用选择器是否存在固有的缓慢问题，或者它是否只是因为滥用滥用而名声不佳。如果 * { margin :0； } 字面上等同于 body, h1, p { margin: 0; }，那么这将回答我的问题，我会知道使用前者，因为它更简洁。如果不是，我想了解为什么通用选择器执行得更慢。
最佳答案
在现代浏览器中，性能影响可以忽略不计，前提是您不对每个元素应用慢速效果(例如框阴影、z 轴旋转)。通用选择器很慢的神话是十年前它很慢的后遗症。
引用:http://www.kendoui.com/blogs/teamblog/posts/12-09-28/css_tip_star_selector_not_that_bad.aspx
关于html - 通用选择器对性能有何影响？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2951997/