2010-10-12 45 views
19

我一直對我的HTML文檔的正文標籤最近應用了ID to allow greater CSS control (#9)。最近,我想到我可以通過將類應用於身體標籤來完成同樣的事情。我想知道每個選擇的積極和消極。如果我有多個身體標記具有相同ID的頁面,那麼使用一個類是否更好?你怎麼看?爲什麼?正文標籤上的分類或ID

更新:類/ ID基本上是我打算用來識別樣式表的哪個頁面或哪種頁面樣式表正被應用到的樣式表。例如,它是主頁,聯繫頁面,許多搜索結果頁面之一,歸檔頁面等?

回答

18

使用類是完全可以接受的,可能比使用id更可取。應儘可能限制ID的使用,因爲它們可能會與其他ID衝突並破壞document.getElementById之類的內容。

id選擇器比類選擇器更具體,它通常使它成爲您的用例的更好選擇。 - 戴維·多沃德

然而,高 「specificness」 並不總是可取的。在主樣式表中考慮body#faq #col_b a {color:gray;},然後有人開發一個帶有灰色背景的插件,在faq頁面上,現在他們需要使用!important或創建另一個id屬性以提供更高的特異性。

另外,考慮在一個單一的主體元素使用多個類:

<body class="faq two_column big_footer"> ... 
+0

你一個人開發的插件,其中的樣式可能會崩潰的例子是極有可能在這種情況下發生的。對我來說,如果有人編寫規則正文#faq #col_b a {color:grey;},那麼您可能必須應用ID /類才能獲得更高的特異性。但是,如果您有body.faq #col_b a {color:grey;}在我看來,ID/class也必須應用於獲得更高的特異性。你能解釋一下這兩種情況之間的區別嗎? – 2010-10-13 16:47:16

+0

沒有什麼區別,真的......我個人不會做col_b的id(對於頁面佈局中的右列),我會使用一個類。在'body#faq .col_b a'和'body.faq .col_b a'之間,第二個應該更容易被其他人覆蓋。總的來說,我認爲如果你正在創建其他人可能建立的CSS,高特異性(如果這就是所謂的)是一個壞的事情,因爲較低的特異性可以達到同樣的效果。 – 2010-10-14 01:42:57

+0

很好的推理。如果其他人正在構建您的CSS,請始終使用實現期望結果所需的最低特異性。 – 2010-10-21 17:45:06

2

ID必須是每頁唯一的(如果你想有效的標記),這意味着一個特定ID只有一個實例應該存在在頁面上。另一方面,類可以應用於每頁的許多元素。將類用於重用相同樣式的事物,並將ID用於需要自己樣式的更多獨特元素。

理想情況下,儘可能使用類並限制ID的使用。

有關ID的更多信息,請參閱here以及更多有關類別的信息,請參閱here

+0

謝謝。我已經閱讀了w3schools。我可以在我的情況下使用課程或ID,這是可以接受的。不過,我正在嘗試對任何可能的積極/消極因素進行頭腦風暴。 – 2010-10-13 16:49:42

+0

在這種情況下,只要您使用它們的語義是正確的,那麼確實沒有任何重大影響。 – 2010-10-13 17:06:42

+1

請不要鏈接到W3Schools - [它們往往不準確,不隸屬於W3C](http://w3fools.com/)。 – iono 2012-12-27 05:42:27

1

如果您打算在頁面中重複使用樣式,最好使用類。如果樣式表是爲特定頁面設計的,則ID很好。但仍然取決於你的應用程序。

0

您可以(閱讀:應該)只使用body標籤上的id。

ID =每頁單次使用

類=多重使用

1正文標記= 1個ID標籤。這可以在不同的頁面上相同。實質上,使用類標記可能是爲了這個目的而矯枉過正。

4

id選擇符比類選擇符多specific,這通常使它成爲您的用例的更好選擇。

0

在HTML5中,可以在任何HTML元素上使用id屬性(它將驗證任何HTML元素,但它不一定有用)。<base>, <head>, <html>, <meta>, <param>, <script>, <style>, and <title>.

注::

在HTML 4.01,id屬性不能與使用HTML 4.01對ID值的含量較大的限制(例如,在HTML 4.01的id值不能以數字開頭)。

來源:W3School