为什么 CSS 重置不使用 '*'覆盖所有元素?

发布于 2024-11-26 23:08:44 字数 818 浏览 2 评论 0原文

例如,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,
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
if you're curious.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

坐在坟头思考人生 2024-12-03 23:08:44

您猜对了 - 原因是 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 an input, it will lose the native styling.

For example: http://jsfiddle.net/nrB6N/

And, there's no way to get that default styling back.

各空 2024-12-03 23:08:44

* 对性能来说真的非常糟糕(对于小网站来说并不重要,但想想例如 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/

风筝有风,海豚有海 2024-12-03 23:08:44

主要是因为它的性能受到打击。另外,因为您不想始终对所有元素应用重置,但对已知会导致问题的元素(围绕盒模型)进行重置。

另外,重置selectinput的样式可能会导致不良的体验。

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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文