關於網頁的組成
要講到CSS選取器的話，就必須了解一個網頁的組成，在現代的網頁設計中最基本都會擁有三大元素：HTML、CSS、JavaScript，而 CSS 就是負責其中視覺外觀的部分，通常會跟 HTML 以及 JavaScript 一起作用。
CSS選取器與其他技術的搭配
一個網頁的視覺通常會利用 CSS 來處理他的 HTML 視覺外觀，簡單的說，HTML 是將網頁資料標記出他的意義，而CSS則是將HTML標籤賦予外觀設定，分工其實非常的清楚，而搭配 JavaScript 的話，則可以讓網頁增加一些視覺互動功能，像是變更字體大小好讓畫面的閱讀更加輕鬆啦，或是做到頁籤區塊的切換。
CSS選取器的基本組成跟作用
CSS 在網頁中的運用，你可以將它視為一個「視覺外觀的設定檔」，或者可思考成一個「裝潢規劃表」，略過 inline-style 的話，在一個獨立的樣式區塊（註：<style>）或是CSS檔案中，他的語法結構大致會像下方這樣
header{ width: 100%; text-align: center; font-size: 87px;
}而翻譯成白話文的話就像下方這樣
你想設定的目標{
要設定的項目1：設定的內容;
要設定的項目2：設定的內容;
要設定的項目3：設定的內容;
}如果上面的概念能懂的話，我們可以再翻譯一次成下面這樣
選取目標{
對目標設定1：設定的內容;
對目標設定2：設定的內容;
對目標設定3：設定的內容;
}上述都能理解的話，我們就能切換到下面這種正規的講法了
選取器{
屬性1：屬性的內容值;
屬性2：屬性的內容值;
屬性3：屬性的內容值;
}經過三段的白話文翻譯，我想各位應該就能理解到，其實CSS選取器就是你想要設定的那個對象，至於為何會叫做選取器？基本上選取器的寫法有很多種，有時單層有時多層，但不管幾層都是為了選到你要設定的那個目標對象，所以我們使用「選取器」來稱呼會是比較好且正確的。
CSS選取器能做什麼？
CSS作為一個設定 HTML 頁面元素的強大存在來說，一個 HTML 頁面中的結構跟資料在現在越來越複雜，相對的 CSS 選取器也變得越來越多樣強大，好讓我們可以更加輕鬆的選取到我們想要設定的對象，簡單的分類的話，可以有以下幾種大項
Tag
class
ID
屬性
僞元素（虛擬元素）
僞類別（虛擬類別）
而其中僞類別 Amos 又可以再將其細分成
動態僞類別（:hover、:active...等）
結構僞類別（:first-child、:last-child...等）
迴圈僞類別（:nth-child、:nth-of-type...等）
表單僞類別（:disabled、:enabled...等）
每一種選取器都有它特殊的用途，熟悉各式選取器的組合搭配運用，可說是一個網頁切版人員或前端工程師的基礎必備能力，像 Amos 目前就用的還不是很熟，覺得還有很多可以變化的技巧還在努力挖掘中，如果你也有跟我一樣的感覺的話，就跟著 Amos 一起在這個主題練習與成長吧！
