嘿，歡迎回到邊學邊程式設計：HTML 和 CSS！今天，我們將深入探討造型的世界。到目前為止，我們一直在直接設計元素的樣式。但是，如果您有兩個

元素並且希望每個元素看起來不同怎麼辦？輸入 CSS 選擇器！

元素選擇器

您已經熟悉這些，但讓我們回顧一下：

h1 {
  font-size: 32px;
  font-family: Arial;
  font-weight: 500;
}

此規則集針對所有

元素，設定其字體大小、系列和粗細。元素選擇器非常適合大綱，例如為整個頁面設定樣式指南。但讓我們面對現實吧，並非所有

標籤都應該看起來相同。對於更具體的造型，我們需要加強我們的遊戲！

類別選擇器

類來救援！想要兩個

標籤看起來不一樣嗎？新增課程：

This text is BIG and red.
This text is small and blue.

每個

標籤都有兩個類別。在 CSS 中，使用 .:
定位這些類

.big {
  font-size: 100px;
}

.small {
  font-size: 9px;
}

.red {
  color: red;
}

.blue {
  color: blue;
}

繁榮！套用樣式。您可能會問，“為什麼不將樣式合併到更少的類別中呢？”好問題！我喜歡保持課程的靈活性。你永遠不知道什麼時候你會想重複使用沒有藍色的小東西。

ID選擇器

對於唯一元素，請使用 ID。看看這個：

My Name is Nolan!

謹慎使用 ID，每頁僅使用一次。在 CSS 中使用 #:
來定位它們

#name {
  text-decoration: underline;
}

簡單吧？

風格衝突

現在，如果一個元素同時具有類別和 ID 會怎麼樣？像這樣：

Will I be red or blue?

它會變紅！為什麼？因為 ID 比類別更具體。這是一個簡單的例子：

I’m styled by three rulesets!

p {
  font-size: 12px;
  color: black;
  text-decoration: none;
}

.underline {
  text-decoration: underline;
}

#red {
  color: red;
}

文字變成紅色並帶有下劃線，字體大小為12px。 ID 勝過類，而類別又會覆寫元素選擇器。這種層疊的樣式使您的頁面看起來很優雅，無需重複程式碼。

挑戰

是時候升級您的「關於我」頁面了！這是你的使命：

• 使用元素選擇器設定

  、

  和

  的預設樣式。

• 使用

  標籤在您的名字下加上標語，並使用 ID 對其進行樣式設定。

• 使用類別選擇器使其他文字變得生動活潑。

玩相互衝突的風格，看看哪種規則獲勝。你能找出原因嗎？

感謝您的閱讀！如果您希望我在本系列中探討任何其他主題，請在評論中告訴我，或者只是讓我知道您如何喜歡這個系列！