CSS選擇器介紹( 1 )

Sandy

Published in

UI/UX練功坊

6 min readNov 15, 2018

包括最基礎的 css選擇器用法

開始學習撰寫css的時候，最常用的選擇器就是類別(元素)、id、class 這三種最直覺的用法：

● 類別(元素)選擇器：直接將指定的元素標籤名稱當做選擇器，例如下列範例：樣式會套用到頁面中所有的<h1>~</h1>，較適合用來定義全體通用的基礎樣式。

h1 { color: #333333; }

● id選擇器：利用 id 屬性為元素命名並做為選擇器，元素(標籤)名稱通常省略不寫。
※ 注意：id 是用來識別在 HTML 檔案中特定位置的屬性，一個 HTML 檔中只能有一個，若在同一個頁面中撰寫多次相同的 id 名稱，將會造成語法錯誤。

#title { text-align: center; }

● class選擇器：利用 class 屬性為元素命名並做為選擇器，省略元素(標籤)名稱時，將被視為通用的 class，任何元素標籤都可以使用，可以在 HTML 檔中多處重複使用。

.text-green { color: #32b16c; }

假如不省略元素(標籤)名稱時則只有特定的元素才適用。例如下列這個就只有 h1 標籤套用此 class 才有效。

h1.text-green { color: #32b16c; }

另外多補充一個由 class 延伸的選擇器

● 複合選擇器：當設定多個 class 時，可以用「.class1.class2」的形式將選擇器結合在一起( class 中間不可有空格)，如此可以指定出「既有class1也有class2」的選擇器

.cat-type.male { color: #2793a7; }

以上說的前三種選擇器：類別(元素)、id、class都是用於單一元素標籤、單一class、單一id的選擇器，稱之為「簡易選擇器」。

除了最基本的簡易選擇器之外，還有許多 css 選擇器，例如通用選擇器、群組選擇器、子孫選擇器、子選擇器、相鄰選擇器等，以下一一介紹用法：

● 通用選擇器：將樣式套用於全部元素標籤中，通常在 reset css 時才會用到此方法。

* { margin: 0px; padding: 0px; }

● 群組選擇器：利用「逗號」串連多個選擇器一併管理的用法，這樣可以將多處不同樣式一次指定，避免重複撰寫相同的 class 內容。

h1,h2,h3 { color: #333333; }
.main-title, .sub-title, .small-title { font-weight: bold; }

● 子孫選擇器：利用元素間的親子關係，依序由「父元素→子元素→孫元素」的形式特定出範圍的選擇器。
注意：必須依序以「半形空格」分隔並列出元素標籤

#main-list ul li a { color: #ff0000; }

但假如能明確的辨識出目的元素，不會與其他用途的標籤混淆，省略中間的元素直接寫目的元素也是可以的，例如上列可以改為：

#main-list a { color: #ff0000; }

● 子選擇器( > )：與子孫選擇器(任意的後代元素皆選)不同，子選擇器是只選擇子元素，子元素的子元素(孫元素)的樣式並不受影響，例如：

<!DOCTYPE HTML>
<html>
<head>
  <style type="text/css">
    li { color: #333333; }    .main-menu > li { color: #ff0000; }
  </style>
</head><body>
<ul class="main-menu">
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3
      <ul>
          <li>項目3-A</li> 
      </ul>
  </li>
</ul>
</body>
</html>

這樣的寫法，ul 中的子元素 li 全部變成紅色，但是孫元素的 li (項目3-A)則不受影響，因為他不是子元素(看測試demo)。
假如改寫成子孫選擇器，所有的 li 元素都會變成紅色的：

<style type="text/css">
  .main-menu li { color: #ff0000; }
</style>

● 相鄰選擇器( + )：可選擇有相同的父元素，緊接在一個元素後的「第一個」相鄰兄弟元素(同一層中)，例如下列範例中，只有 h1 的下一個 p 是紅色的，其他第二個之後的 p 仍然是黑色的(看測試demo)。

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
    h1 + p { color: #ff0000; }
</style>
</head><body>
  <h1>This is a heading.</h1>
  <p>This is paragraph.</p>
  <p>This is paragraph.</p>
  <p>This is paragraph.</p>
  <p>This is paragraph.</p>
  <p>This is paragraph.</p>
</body>
</html>

但是以上這個範例，假如我們改寫成 p + p 的話結果會是什麼？

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
    p + p { color: #ff0000; }
</style>
</head><body>
  <h1>This is a heading.</h1>
  <p>This is paragraph.</p>
  <p>This is paragraph.</p>
  <p>This is paragraph.</p>
  <p>This is paragraph.</p>
  <p>This is paragraph.</p>
</body>
</html>

因為 p + p 代表的是：有相同的父元素(body)，緊接在一個 p 元素後的「第一個」相鄰 p 元素。而這個範例中有五個 p 元素，可得知第二個～第五個 p 元素都會變成紅色的(看測試demo)。
這個技巧常用在一個區塊中段落與段落之間的間距(ex.從第二段開始，與上一個段落保持上方外距)，可多設想如何運用這個寫法。

另外，還要介紹一個 css3 新增的選擇器：

● 間接選擇器( ~ )：可選擇有相同的父元素，兄元素「之後所有的」弟元素，例如剛剛那個範例若改成~選擇器，h1 上面再多加一個 p ，結果是除了h1 上面的那個 p ，底下的 p 全部變成紅色的了(看測試demo)。

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
    h1 ~ p { color: #ff0000; }
</style>
</head><body>
  <p>This is paragraph.</p>
  <h1>This is a heading.</h1>
  <p>This is paragraph.</p>
  <p>This is paragraph.</p>
  <p>This is paragraph.</p>
  <p>This is paragraph.</p>
  <p>This is paragraph.</p>
</body>
</html>

介紹了那麼多 css 選擇器，還有屬性選擇器以及虛擬類別和虛擬元素(偽元素)等許多好用的選擇器留著下篇再繼續介紹。

先複習一下剛剛說的：
>只選擇子元素不選擇孫元素
+只選擇相鄰的第一個兄弟元素
~可以選擇兄元素之後所有的弟元素

CSS選擇器介紹( 1 )

Written by Sandy