为什么 CSS 重置不使用 '*'覆盖所有元素?
例如,Meyer 重置有一长串元素1< /sup> 我相信可以用 *
替换?
我见过一些使用:
* {
margin: 0;
padding: 0;
}
但更“高级”的重置似乎与明确说明标签有关。
我认为标签列表中没有被 *
覆盖的唯一元素是 input
、按钮
和选择
——事实上,Eric Meyer 的重置似乎根本没有真正处理这些元素。如果避免重置这些元素是问题所在……为什么不呢?显然,浏览器并不都以相同的方式显示表单元素。
1 html、body、div、span、applet、object、iframe、 h1、h2、h3、h4、h5、h6、p、块引用、前、 a、缩写、首字母缩略词、地址、大、引用、代码、 del、dfn、em、img、ins、kbd、q、s、samp、 小、罢工、强、sub、sup、tt、var、 b、u、I、中心、 dl、dt、dd、ol、ul、li、 字段集、表单、标签、图例、 表、标题、tbody、tfoot、thead、tr、th、td、 文章、旁白、画布、详细信息、嵌入、
(如果您好奇的话)。
图、figcaption、页脚、页眉、hgroup、
菜单、导航、输出、ruby、部分、摘要、 时间、标记、音频、视频
For example, the Meyer reset has a long list of elements1 which I believe can be replaced with a *
?
I have seen some use of:
* {
margin: 0;
padding: 0;
}
But more "advanced" resets seem to go with explicitly stating the tags.
The only elements I don't see covered in the tag list that are covered (I presume) with a *
are input
, button
, and select
—the Eric Meyer reset, in fact, doesn't appear to really deal with those elements at all. If avoiding resetting these elements is the issue…why wouldn't you? Browsers obviously don't all display form elements the same.
1 html, body, div, span, applet, object, iframe,
if you're curious.
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, 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,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
您猜对了 - 原因是
form
元素。如果您在
input
上设置border: 0
,它将丢失本机样式。例如: http://jsfiddle.net/nrB6N/
并且,无法恢复默认样式。
You've guessed correctly - the reason is
form
elements.If you set
border: 0
on for example aninput
, it will lose the native styling.For example: http://jsfiddle.net/nrB6N/
And, there's no way to get that default styling back.
*
对性能来说真的非常糟糕(对于小网站来说并不重要,但想想例如 5000 多个 HTML 元素的影响)。针对特定元素总是更快、更高效。在选择使用 ID 还是 CLASS 时也需要记住这一点。考虑一下当今常见的 JavaScript,您会发现使用 ID 或精确的 CSS 语句定位元素可以提高性能。http://code.google.com/speed/page-speed /docs/rendering.html#UseEfficientCSSSelectors
ps。除了速度之外,它还影响
input
元素,在 * border、padding 和 margin 0 之后,这些元素变得很难设计样式,以便它们在浏览器中看起来相同,尤其是在 IE 中。了解更多:http://www .christianmontoya.com/2007/02/01/css-techniques-i-use-all-the-time/*
is really, REALLY bad for performance (doesn't really matter on small sites, but think the repercussions for 5000+ HTML elements for example). Targetting specific elements is always faster and more efficient. It's a thing to also keep in mind when choosing wether to use an ID or an CLASS. Count in the more than common JavaScript today, and you find out that targetting elements with ID's or precise CSS statements yields in performance improvements.http://code.google.com/speed/page-speed/docs/rendering.html#UseEfficientCSSSelectors
ps. Apart from speed, it also affects
input
elements, which after the * border, padding, and margin 0 become quite difficult to style so that they look the same accross browsers, especially in IE. Read more: http://www.christianmontoya.com/2007/02/01/css-techniques-i-use-all-the-time/主要是因为它的性能受到打击。另外,因为您不想始终对所有元素应用重置,但对已知会导致问题的元素(围绕盒模型)进行重置。
另外,重置
select
、input
的样式可能会导致不良的体验。Mainly because its a performance hit. Also, since you do not want to apply reset to all elements all the time but the ones known to cause issues (around box model).
Also, resetting style of
select
,input
may cause undesirable experience.