爲什麼CSS重置不使用'*'來覆蓋所有元素？

例如，the Meyer reset有很長的元素列表，我相信可以用*代替嗎？爲什麼CSS重置不使用'*'來覆蓋所有元素？

我已經看到了一些使用：

* { 
    margin: 0; 
    padding: 0; 
}

但更「高級」復位似乎去與明確說明的標籤。

唯一的元素我沒有看到覆蓋在標籤列表是覆蓋（我相信）與*被input，button，並select -the埃裏克邁耶重置，實際上不會出現真正處理這些元素。如果避免重置這些元素是問題......爲什麼不呢？顯然瀏覽器不要所有顯示的表單元素都是一樣的。

^{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如果你好奇。}

來源

2011-07-29 Aaron Yodaiken

你猜對了 - 原因是form元素。

如果您將border: 0設置爲例如input，則會丟失原生樣式。

例如：http://jsfiddle.net/nrB6N/

而且，也沒有辦法讓默認樣式回來。

來源

2011-07-29 23:28:58 thirtydot

（我選了'border：0'，因爲這是一個很好的例子，它在你提到的CSS重置中。） – thirtydot

謝謝你的回答 - 是否有一個確定的重置表單元素，以某種方式迴避這個問題？（也許使用JavaScript來檢測瀏覽器，並通過本地樣式來調整填充或相應的東西？我顯然不知道我在說什麼。） –

一般而言，您只是不要重置它們。你有什麼特別的不一致嗎？ – thirtydot

主要是因爲它的表現受到打擊。此外，由於您不想一直將重置應用於所有元素，但已知會導致問題的元素（圍繞框模型）。

此外，重置樣式select,input可能會導致不良的體驗。

來源

2011-07-29 23:28:46 Mrchief

你能在這裏詳細說一下嗎？它是如何導致性能下降的（源代碼/測試？）爲什麼你不想重置所有元素？如何重置'select'和'input'導致不良的經驗，它們是什麼？ –

正在顯式幫助你在你最喜歡的瀏覽器 - IE :)。其餘的都很好。 – Mrchief

你有這方面的來源嗎？ –

*對於性能來說真的很差（在小網站上並不重要，但考慮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/

來源

2011-07-29 23:36:06 red

你有來源嗎？ –

找到並添加到我的回覆中。 – red

感謝您的鏈接！ – Mrchief

爲什麼CSS重置不使用'*'來覆蓋所有元素？

回答

相關問題