我要成為前端工程師的學習筆記：HTML & CSS 篇 - CSS 選擇器 Day3

選擇器這篇要介紹的是 CSS 常用的選擇器，例如： HTML 標籤選擇器、擬態選擇器、類別選擇器，它們通常是用來指定哪個部分套用上什麼的 CSS 樣式。

HTML 標籤選擇器

HTML 標籤選擇器，顧名思義就是在 HTML 標籤上做樣式變化，例如：h1、p、a....等很多，只要是 HTML 本身的標籤都可以，這裡也要講使用 HTML 標籤選擇器做樣式，該標籤套用的樣式，效果都是會一致的，像是下面程式碼的 h1 標籤，CSS 套用顏色藍色、文字大小 40px，該網頁內容只要出現的 h1 標籤樣式都會是一樣。

HTML

<h1>標題</h1>

<p>段落一</p>

<a href="#">連結</a>

CSS

h1 {
  color: blue;
  font-size: 40px;
}

p {
  color: red;
  font-size: 30px;
}

a {
  color: pink;
  font-size: 30px;
}

畫面

擬態選擇器

擬態選擇器比較常用在 a 連結標籤，主要目的是增加使用者體驗，在其他 HTML 標籤上也是可以使用，只是比較不常看到。

下面程式碼我們拿 a 連結標籤來介紹，一開始設定樣式是文字顏色黑色、大小 30px，來看 a:hover 這段程式碼，它的意思是當滑鼠滑到"連結"時，文字顏色會變藍色、大小變 50px，再來看 a:active 這段，它的意思是當滑鼠左鍵按住"連結"時，字體顏色會變紅色，h1 部分就是要表示其他 HTML 標籤也是可以做擬態選擇器。

HTML

<a href="#">連結</a>

<h1>標題</h1>

CSS

a {
  color: black;
  font-size: 30px;
}

a:hover {
  color: blue;
  font-size: 50px;
}

a:active {
  color: red;
}

h1 {
  color: blue;
  font-size: 40px;
}

h1:hover {
  color: blue;
}

畫面

類別選擇器

類別選擇器就是自訂一個 class，設定名稱及想要的樣式，可以套用在想要用的 HTML 標籤上。

這裡我們用 p 標籤來做介紹，剛開始 p 標籤 CSS 文字顏色設定是紅色，第 3 段 p 標籤我們加上 green 類別，文字顏色變成我們自訂的顏色綠色，這裡也要注意類別選擇器跟標籤選擇器寫法不一樣，類別選擇器名稱前面一定要加"點"號，像是 .green 沒寫到樣式是不會被套用。

HTML

<p>段落二</p>

<p>段落二</p>

<p class="green">段落二</p>

CSS

p {
  color: red;
  font-size: 30px;
}

.green {
  color: green;
}

畫面