類和ID幫助擴展您的CSS
在今天的網站上構建網站需要深入了解CSS（層疊樣式表）。 這些是您給網站確定如何在瀏覽器窗口中進行佈局的說明。 您將一系列“樣式”應用於HTML文檔，這將創建網頁的外觀和風格。
在文檔中應用上述樣式的方法有很多種，但通常您只想在文檔中的某些元素上使用樣式，但不是該元素的所有實例。
您可能還想創建一種可應用於文檔中多個元素的樣式，而無需為每個單獨的實例重複樣式規則。 要實現這些所需的樣式，您將使用類和ID HTML屬性。 這些屬性是可以應用於幾乎所有HTML標籤的全局屬性。這意味著無論您是在文檔中設計分部，段落，鏈接，列表還是其他任何HTML部分，都可以將類和ID屬性轉換為幫助你完成這項任務！
類選擇器
類選擇器允許您將多個樣式設置為文檔中相同的元素或標記。 例如，您可能希望使用與文檔中其余文本不同的顏色調出文本的某些部分。 這些突出顯示的部分可能是您在頁面上設置的“警報”。 你可以用這樣的類來分配你的段落：
p {color：＃0000ff; }
p.alert {color：＃ff0000; }
這些樣式會將所有段落的顏色設置為藍色（＃0000ff），但具有“alert”類屬性的任何段落都將改為以紅色（＃ff0000）的樣式表示。 這是因為class屬性比僅使用標籤選擇器的第一個CSS規則具有更高的特異性。
使用CSS時，更具體的規則將覆蓋較不具體的規則。 因此在這個例子中，更一般的規則設置了所有段落的顏色，但是第二個更具體的規則比覆蓋僅在一些段落上設置的規則更重要。
這是如何在一些HTML標記中使用的：
該段落將以藍色顯示，這是該頁面的默認值。
本段也將是藍色的。
而這個段落將以紅色顯示，因為class屬性會覆蓋元素選擇器樣式中的標準藍色。
在該示例中，“p.alert”的樣式僅適用於使用該“alert”類的段落元素。如果要在多個HTML元素中使用該類，只需從該元素的開頭刪除HTML元素風格的調用（只是要確保離開時間段（。）），如下所示：
.alert {background-color：＃ff0000;}
這個類現在可用於任何需要它的元素。 現在，您的任何具有“alert”類屬性值的HTML片段都將獲得此樣式。 在下面的HTML中，我們有一個使用“alert”類的段落和標題級別2。 基於我們剛剛展示的CSS，這兩種都將具有紅色的背景顏色。
本段將以紅色書寫。
這個h2也是紅色的。
在今天的網站上，類屬性通常用於大多數元素，因為從ID的特異性角度來看，它們更容易處理。 您會發現大多數當前的HTML頁面都是用類屬性填充的，其中一些在一個文檔中重複多次，而另一些則只出現一次。
ID選擇器
ID 選擇器允許您為特定樣式指定名稱，而不將其與標籤或其他HTML元素相關聯。 假設您的HTML標記中包含有關事件信息的部門。
你可以給這個部門一個“事件”的ID屬性，然後如果你想用一個1像素寬的黑色邊框勾勒出這個部門，你可以寫下如下的ID代碼：
#event {border：1px solid＃000; }
ID選擇器面臨的挑戰是它們不能在HTML文檔中重複使用。 它們必須是唯一的（您可以在網站的多個頁面上使用相同的ID，但每個HTML文檔只能使用一次）。 所以如果你有3個事件都需要這個邊界，你需要給他們ID“event1”，“event2”和“event3”的屬性，並設置它們的樣式。 因此，使用前面提到的“事件”類屬性並將它們一次全部樣式化會容易得多。
ID屬性的另一個挑戰是它們比類屬性具有更高的特異性。 這意味著如果您需要擁有覆蓋以前建立的樣式的CSS，那麼如果您太過依賴ID，則很難這樣做。 正是出於這個原因，許多Web開發人員已經放棄在其標記中使用ID，即使他們只打算使用該值一次，而是轉向幾乎所有樣式的不太具體的類屬性。
ID屬性確實起作用的一個領域是當你想創建一個具有頁面內錨鏈接的頁面時。 例如，如果您有一個視差風格的網站，其中包含單個頁面上的所有內容，並且鏈接可以跳轉到該頁面的各個部分。 這是通過使用這些錨鏈接的ID屬性和文本鏈接完成的。
您只需將該屬性的值（以＃符號開頭）添加到鏈接的href屬性中，如下所示：
這是鏈接
點擊或觸摸時，此鏈接將跳轉到具有此ID屬性的頁面部分。 如果頁面上沒有元素使用此ID值，則鏈接將不會執行任何操作。
請記住，如果您想在網站上創建頁內鏈接，則需要使用ID屬性，但您仍然可以轉而使用類來實現一般的CSS樣式目的。 這就是我今天如何標記頁面 - 我盡可能多地使用類選擇器，並且只有當我需要該屬性不僅充當CSS的鉤子，而且還充當頁內鏈接時，才會使用類選擇器。
Jennifer Krynin的原創文章。 在8/9/17由Jeremy Girard編輯