[快速入門前端 10] CSS 選擇器 (1) 基本選擇器 — 通配符、元素、類別 Class、id、屬性

前端新手村 css css選擇器

Doris 2023-05-16 11:50:17 ‧ 1962 瀏覽

分享至

CSS 選擇器

選則器的功能在於讓瀏覽器知道樣式要套用在哪個或哪些元素中，主要依據選擇器的複雜程度分為基本選擇器和複合選擇器。本篇我們會介紹常用的基本選擇器，主要分為四種：通配符選擇器、元素 (標籤) 選擇器、類別 (Class) 選擇器、id 選擇器。

通配符選擇器

通配符選擇器很單純，用 * 來表示，會選取頁面中所有的元素 (標籤)，通常會寫在樣式的最前面為網頁做基本的設定，例如設定字體或內外邊距。

語法：

* { 
	屬性名 : 屬性值;
}

範例：

* {
    margin: 0px; /* 將所有元素的外邊距設為 0 */
}

補充：這邊建議將通配符選擇器寫在樣式檔最前面的地方是因為在 CSS 樣式中會依照優先度及先後順序覆蓋前面設定的樣式，而通配符會對所有元素作用，寫在最前面的話後面個別元素若有不同樣式就可以很容易的覆蓋上去。

元素 ( 標籤 ) 選擇器

元素選擇器會為檔案中某種元素設定統一的樣式，它抓取的是某個標籤的所有元素，例如 <h>、<p>、<div> 等。假設我們將 <p> 中的文字顏色設為紅色，那在當前檔案的所有 <p> 內的文字不管在哪、內容是什麼，都會變成紅色。元素選擇器的缺點是無法設計差異化的樣式，所以我們通常不會拿來設定樣式的細節。

語法：

element {
	屬性名 : 屬性值;
}

範例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS小練習</title>
  </head>
  <style>
   * { 
      color: red; /* 不管是 <p> 或 <input> 中的文字都會套用樣式變成紅色 */
    }
  </style>
  <body>
    <p>文字文字文字</p>
    <input type="button" value="按鈕">    
  </body>
</html>

Class ( 類別 ) 選擇器

類別選擇器的作用是根據元素的 Class 值選中某些的元素，它的概念有點像我們把元素進行分組分類，並賦予該類別一些特別的樣式，這樣可以有效的解決元素選擇器無法差異化的問題。

在類別選擇器中，一個標籤可以擁有多個 Class，以空格隔開，例如 <input class="red myInput">，同個類別也可以運用在多個元素中 (多對多)，不過類別取名不可以數字開頭。

元素的 Class 名稱不用帶 .，但選擇器前面要加，否則會跟元素選擇器搞混
Class 是我們自定義的類別，不可使用中文，若為多單詞組成可以以 - 符號連接，例如 my-class
一個元素不可以擁有多個同名屬性，例如 <input class="a" class="b"> 這樣是錯誤的寫法，應該將類別名稱寫在同個 Class 屬性中並以空格分開

語法：

/* CSS 部分 */
.class名稱{ /* 類別名稱前面需要加一個 "." */
	屬性名 : 屬性值;
}
/* ----------------------------- */
/* HTML 部分 */
<p class="class名稱">文字文字文字</p>

範例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS小練習</title>
  </head>
  <style>
    .red { 
      color: red; /* 所有擁有 red 類別的元素文字都會變成紅色。所以第二段文字還是維持黑色 */
    }
  </style>
  <body>
    <a class="red myClass">這個字會變成紅色喔</a> <!-- 第二個 Class，myClass 因為沒有找到相關的 CSS 樣式所以不會起作用，但也不會報錯 -->
    <p class="red">一般來說，生活中，若情人節出現了，我們就不得不考慮它出現了的事實。</p>
	<p>一般來說，生活中，若情人節出現了，我們就不得不考慮它出現了的事實。</p>
 </body>
</html>

ID 選擇器

ID 就像是元素的身分證號碼，而 ID 選擇器可以透過 ID 找到頁面中的某個元素進行樣式設置。

元素的 ID 值不用帶 #，但選擇器前面要加，寫法為 #ID名
ID 在頁面中是唯一的，不可重複，不可含空格
一個元素只能有一個 ID ; 一個 ID 選擇器只能選中一個元素
元素可以同時有一個 ID 和多個 Class

語法：

/* CSS 部分 */
#id名稱 { /* id名稱前面需要加一個 "#" */
	屬性名 : 屬性值;
}
-----------------------------
/* HTML 部分 */
<p id="id名稱">文字文字文字</p>

範例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS小練習</title>
  </head>
  <style>
    #text{ 
      color: red; /* id 為 text 的元素文字會變成紅色 */
    }
  </style>
  <body>
    <p id="text">一般來說，生活中，若情人節出現了，我們就不得不考慮它出現了的事實。你真的了解情人節嗎？叔本華有一句座右銘，意志是一個強壯的盲人，倚靠在明眼的跛子肩上。這讓我思索了許久，現在，解決情人節的問題，是非常非常重要的。 所以，既然是這樣，米歇潘在不經意間這樣說過，生命是一條艱險的峽谷，只有勇敢的人才能通過。這讓我深深地想到，本人也是經過了深思熟慮，在每個日日夜夜思考這個問題。問題的關鍵究竟為何？</p>
 </body>
</html>

屬性選擇器

屬性選擇器的寫法很多元，不過基本上就是透過元素的屬性來進行選擇，可一次作用於多個元素上，下面就讓我們來介紹比較常見的幾種寫法。

語法：

/* 情境一：選取具有某屬性的元素 */
[name] { /* 選取所有有 name 屬性的元素 */
	屬性名 : 屬性值;
}

/* 情境二：選取具有某屬性等於某值的元素 */
[name="myElement"] { /* 選取所有 name 屬性等於 myElement 的元素 */
	屬性名 : 屬性值;
}

/* 情境三：選取具有某屬性，且屬性值含有某字元的元素 */
[name^="m"] { /* 選取所有 name 屬性開頭為 m 的元素 */
	屬性名 : 屬性值;
}
[name$="m"] { /* 選取所有 name 屬性結尾為 m 的元素 */
	屬性名 : 屬性值;
}
[name*="m"] { /* 選取所有 name 屬性含有 m 的元素 */
	屬性名 : 屬性值;
}

在開發中，屬性選擇器經常與標籤共同使用，例如：

input[name="myInput"] {
  /* 選擇所有 name 為 myInput 的 input 標籤 */
}

基本選擇器總覽

基本選擇器	說明	語法
通配符	作用範圍為所有標籤，用於頁面整體樣式	`* { color: red }`
元素	作用於同種標籤，不能進行差異化樣式設定	`p { color: red }`
類別	作用於我們自行設定的類別，是使用頻率最高的選擇器	`.myClass { color: red }`
ID	選取當前 ID 相同的唯一元素	`#myId { color: red }`
屬性選擇器	用法多元，依屬性進行篩選	`[name="myElement"] { color: red }`