爲CSS目的使用id屬性的原因是什麼？

Question

我一直使用class屬性，從來沒有id爲CSS選擇和樣式的目的。我知道id必須是唯一的，但這似乎不是將其用於CSS的原因。

我使用id屬性的唯一原因是JavaScript和表單標籤。

我發現混合id和class爲CSS的目的可能會造成混淆，對我而言，這是強制分離樣式和行爲的好方法。

是否有很好的理由使用id用於CSS目的？ id有什麼可以通過class無法完成的嗎？

評論，我發現有用/有趣

• 你可以說一下班同樣的事情。在那裏有許多JavaScript（並且必須）針對特定類的元素。從行爲的角度來看，在這些實例中更改類同樣存在問題。 - AaronSieb
• ID在級聯中的類別具有不同的特性。 - Killroy
• 使用的造型ID有道理的，如果它是沒有重複的，尤其是如果它的東西，全部/大部分的網頁顯示出來的元素 - RichN

Answer 1

我使用ID標籤的主要原因是與正在閱讀我的代碼的人交流。具體來說，ID標籤可以很容易地引用他們想要的任何特定元素，並且完全放心，知道它對它做出的任何更改只會影響該元素。

編輯：還有一個更技術性的理由使用你可能不知道的ID標籤。我根據vol7ron的comment和一些進一步的研究歷史記錄再次更新了這篇文章。對於那些剛接觸CSS的人來說，這些信息可能相當有啓發性。

下面的大綱說明了層疊樣式表的「級聯」的本質究竟是如何工作的：

1. 贏家= 重要聲明！
   • 例如， #some-element {color: blue !important;}節拍#some-element {color: red;}。
2. 獲勝者= 聯機CSS。
   • 例如：
     • <div id="some-element" style="#some-element {color: yellow;}">some content</div>次...
     • <style type="text/css">#some-element {color: red;}</style>和...
     • <link type="text/css" link rel="stylesheet" href="set-some-element-color-to-blue.css"/>。
3. 得獎=最大ID選擇器的＃。
   • 例如， #some-element#id-2 {color: blue;}節拍#some-element {color: red;}。
4. 得獎=最大類，僞類，和其它屬性選擇的＃。
   • 例如， .some-elements.class-2 {color: blue;}節拍.some-elements {color: red;}。
5. 得獎=最大＃的元素名稱和僞元素在選擇器。
   • 例如， #some-element:hover {color: blue;}節拍#some-element {color: red;}。
6. 獲勝者= 最近讀了的機器。
   • 例如：
     • <style type="text/css">#some-element {color: red;}</style>次...
     • <link type="text/css" link rel="stylesheet" href="set-some-element-color-to-blue.css"/>因爲內部CSS之後外部CSS讀取。

在這個綱要，通過基於輪廓，即最上面的標準比較2種的CSS樣式啓動 「1贏家= ！important聲明。」如果一方在這方面的優先級高於其他方，那麼它會勝出。如果他們在這方面是相同的，繼續下一個標準，直到找到區分因素。