development
CSS 選取器(基本篇) - CSS Selector
一個開發者對於畫面的掌控度高不高，完全都可以取決於「CSS 選取器」掌握度，無論是基本的 CSS 到 jQuery 甚至是原生的 JavaScript 都是使用 CSS 選取器。另外如果要寫道後端測試、爬蟲，也是持續使用這看似基礎的觀念，本篇將會循序漸進介紹各種選取器，讓大家從基礎開始學習此知識。
而選取器是選取 HTML 元素的語法，它並不會限制只運用在 CSS 上（雖然普遍稱為 CSS Selector）。
元素選取器
最基本的 HTML 標籤選取，可以直接選取畫面上所有 “同類型的元素”，屬於比較廣泛的選取器。
以下範例來說就直接選取了 a 標籤，並將它改為了紅色。
<a href="https://www.apple.com/" target="_blank">這是 Apple 官網連結</a>a {
background-color: red;
}元素選取 - 實戰說明
因為它是屬於廣泛的選取器，雖然可一次選擇非常大量的元素；雖然這是優點但也同時是缺點，大量的選取可能會影響到其它不需要被選取的項目，為了避免影響後續維護或開發，此選取器大多都是利用在：
- 開頭的 CSS Reset，範例：https://meyerweb.com/eric/tools/css/reset/
- 限定範圍的標籤，例如：部落格主要文章中的段落 p 標籤
類別選取
類別選取是樣式套用 “最實用” 的選取器，它具有以下的特性：
- 可重複利用（套用在多個標籤上）
- 可重複套用（可多個類別套用在同一個標籤上）
- 適當的權重
以下建立了 .a-link 的類別，並套用在 a 標籤上使其背景色調整為黃色。
<a href="https://www.apple.com/"
class="a-link" target="_blank">這是 Apple 官網連結</a>.a-link {
background-color: yellow;
}類別選取 - 多個類別重複套用
類別選取兩個特性：
- 可重複利用（套用在多個標籤上）
- 可重複套用（可多個類別套用在同一個標籤上）
其中的 “可重複套用” 是許多新手會忽略的用法，使用方式就是定義兩個樣式並套用在同一個元素上。
<a href="https://www.apple.com/"
class="a-link a-link-color" target="_blank">這是 Apple 官網連結</a>.a-link {
background-color: yellow;
}
.a-link-color {
color: black;
}類別選取 - 實戰說明
它具有非常多的優勢，讓許多框架、設計模式都是基於 class 為基礎進行設計，例如：
- OOCSS 的設計模式，參考文
- Bootstrap 最流行的前端開發工具
- 以 Utilities 為單位的 CSS 框架
所以運用上請把握一個原則，這是 CSS 樣式表運用 “最為廣泛的選取器”（沒有之一），如果是作為樣式使用：
- 請使用 class 取代 id
- 如果可以套用 class 時，請不要直接使用元素或其它選取器
ID 選取
在一個 HTML 頁面中原則上僅會有一個 id，如果出現兩個以上時，部分瀏覽器則會跳出錯誤的提示，建議調整頁面上重複定義 id 的元素。
Id 選取在應用上特性：
- 具有唯一性：畫面上僅會有一個該名稱 id
- 較高的樣式權重：如果與 class 的樣式有衝突時，會以 id 為主
以下範例就選取了 id a-link，要特別注意一個 id 在頁面中原則上只會有一個。
<a href="https://www.apple.com/"
id="a-link" class="b-link" target="_blank">這是 Apple 官網連結</a>#a-link {
background-color: pink;
}
.b-link {
background: blue;
}id 選取 - 實戰說明
它具有高權重、不可重複、頁面唯一的特性，讓樣式無法多次的運用，並且可能造成管理上的問題；因此，實戰開發中不會使用 “id 選取器” 作為樣式的選取（注意：千萬不要這麼做）。
不過這樣的特性卻很適合作為樣式以外的用途，例如：
- input 與 label 標籤的對應
- 頁面元素的絕對選取（頁面上只會有一個），在 JS、後端爬蟲、測試中相當好用
屬性選取
相對於以上的選取器來說，這是相對少見但也是更為靈活的選取器，無論在樣式或任何情境都相當好用，在受到限制的情境中常常會有意想不到的用途，例如：
- 標籤的屬性必須為特定屬性值，如：
<input type="checkbox"> - HTML 的結構已經確立無法改變時，如：已經完成頁面，需要進行爬蟲或測試使用
屬性選取可運用的組合也相當多樣，基本上只要 HTML 元素中有任何一些不同，都可作為屬性選取器的選取方式。
以下將一一的介紹屬性選取的各種手法：
- 包含特定 “屬性” 的選取
- “屬性及值” 完全符合
- 屬性值 “包含特定字串”
- ”結尾值“ 包含特定文字
- 屬性選取 實戰操作
包含特定 “屬性” 的選取
只要元素中包含特定「屬性」皆可選取，以下範例來說其中一個 a 標籤缺少了 href 屬性，因此將不會被套用紅色的樣式，所以此方法也可以過濾出標籤中是否有正確包含特定屬性。
<a href="https://www.apple.com/"
target="_blank">Apple 官網連結</a>
<a href="https://www.google.com/"
target="_blank">Google</a>
<a target="_blank">連結缺少 href</a>[href] {
color: red;
}“屬性及值” 完全符合
接下來就是屬性選取慢慢進入進階的流程，當屬性內的值完全符合時，可以選取此元素。
<a href="https://www.apple.com/"
target="_blank">Apple 官網連結</a>
<a href="https://www.google.com/"
target="_blank">Google</a>[href="https://www.apple.com/"] {
color: red;
}屬性值 ”包含特定字串“
”包含特定字串“ 開始的運用變化就越來越多，以此範例就可以判斷標籤內的連結目標為何。
<a href="https://www.apple.com/"
target="_blank">Apple 官網連結</a>
<a href="https://www.google.com/"
target="_blank">Google</a>[href*="google"] {
color: red;
}“開頭值” 包含特定文字
除了判斷部分字詞以外，還可以從前到後、前後至前的選取形式。
<a href="https://www.apple.com/"
target="_blank">Apple 官網連結</a>
<a href="http://www.google.com/"
target="_blank">Google</a>[href^="https"] {
color: red;
}
”結尾值“ 包含特定文字
此範例為結尾值的選取形式，就可以進行從後至前的選取。
<a href="https://www.apple.com/tw/"
target="_blank">Apple 官網連結</a>
<a href="http://www.google.com/"
target="_blank">Google</a>[href$="/tw/"] {
color: red;
}
屬性選取 實戰操作
屬性選取在實戰中應用非常廣，最常見的案例之一就是判斷 input 的 type 類行為和，透過此方式避免選取到錯誤類型的 input（如果把 input 樣式套用在 checkbox 上就會顯得非常不適切）。
<input type="checkbox">input[type="checkbox"] {
appearance: none;
border: 1px solid red;
width: 1rem;
height: 1rem;
}
input[type="checkbox"]:checked {
background: red;
}除此之外，CSS 的選取方式不限制僅能使用 CSS，因此無論是 jQuery、JavaScript 都可以使用此方式進行選取，以上述範例中的連結選取，都可以改用 JS 來進行處理，在現實的開發中就可以用來：
- 當開發受到限制，不可調整 HTML 原始碼時，可使用 JS 置換內容
- Node.js 爬蟲開發
- Chrome 插件（擷取網頁內的資訊）
CSS Selector 實戰練習
最後，提供一個練習題目讓大家動手試試看，透過下方的 input 輸入選取器語法，試著選擇以下卡片中的特定元素吧！（被選取的元素會以紅色外框呈現）
挑戰題目：
- 選取 https 開頭的 a 標籤
- 選取 /tw 結尾的 a 標籤
- 選取左邊的圖片
- 同時選取 input 及 textarea
- 僅選取 checkbox
- 選取 textarea 對應的 label
這些題目，你可以完成幾題呢？