Question

可能重复：
why don't css resets use '*' to cover all elements?

目前我使用：

*{
    margin:0;
    padding:0;
}

但我不确定为什么人们继续使用：

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin:0;
    padding:0;
}

为什么大多数网站（包括这个网站）使用第二种方法有什么特别的原因吗？必须有一个非常好的理由来增加像这样的CSS文件大小

Answer 1

我实际上不同意大多数Web开发人员都会列出一长串的元素选择器。实际上，Web开发人员对于重置CSS的最佳方法都有不同的看法。

例如，“的黎波里重置”使用通用选择器*。

本文仅详述了一些重置CSS的方法。

http://sixrevisions.com/css/a-comprehensive-guide-to-css-resets/

我认为更具体的一个原因是提到的上述答案的性能（尽管现在的现代浏览器在解析CSS方面非常快）。此外，如果需要，开发人员也可以更具体。例如，某些CSS属性（如border-collapse）仅适用于特定类型的元素。

Answer 2

这是性能问题。我强烈建议您阅读Steve Souders的工作，他在高性能前端方面做了大量的基准测试和分析。本质上，当您使用*运算符时，浏览器必须对DOM进行大量挖掘和分析，而如果您明确指定运算符则不必执行此操作。

与在SQL查询中执行SELECT * vs执行SELECT id非常相似。如果执行SELECT *，则在数据库查找列名时会产生额外的开销。同样的事情。

有关史蒂夫·索德斯的一个例子，请阅读this。

* vs html，body，div，span，applet，object，iframe ...等

2 个答案: