選擇器可以選中頁面上的特定元素并為其指定樣式。
CSS有多種選擇器。

基礎選擇器

• 標簽選擇器 – tagname：匹配目標元素的標簽名。優先級是0,0,1。如：p、h1、div
• 類選擇器 – .class：匹配class屬性中有指定類名的元素。優先級是0,1,0。如：.media、.menu
• ID選擇器 – #id：匹配擁有指定ID屬性的元素。優先級是1,0,0。如：#container
• 通用選擇器 – *：匹配所有元素。優先級是0,0,0。

組合器

組合器是將多個基礎選擇器連接起來組成一個復雜選擇器。

• 后代組合器：兩個基礎選擇器之間的空格，最常見的組合器。如 .nav-menu li
• 子組合器（>）：匹配的目標元素是其他元素的直接后代。如 .parent > .child
• 相鄰兄弟組合器（+）：匹配的目標元素緊跟在其他元素后面。如 p + h2
• 通用兄弟組合器（~）：匹配所有跟隨在指定元素之后的兄弟元素。注意，它不會選中目標元素之前的兄弟元素。如 li.active ~ li
• 復合選擇器：多個基礎選擇器可以連起來組成一個復合選擇器。如 h1.page-header。注意：復合選擇器選中的元素將匹配其全部基礎選擇器。例如，.dropdown.is-active能夠選中
  ，但是無法選中

  。

偽類選擇器

偽類選擇器用于選中處于某個特定狀態的元素。可能是由于用戶交互，也可能是由于元素相對于其父級或兄弟元素的位置。偽類選擇器始終以一個冒號（:）開始。優先級等于一個類選擇器（0,1,0）。

• :first-child – 匹配的元素是其父元素的第一個子元素。

• :last-child – 匹配的元素是其父元素的最后一個子元素。

• :nth-child(an+b) – 匹配的元素在兄弟元素中間有特定的位置。

• :nth-last-child(an+b) – 類似于：nth-child()，但不是從第一個元素往后數，而是從最后一個元素往前數。

• :first-of-type – 類似于：first-child，但不是根據在全部子元素中的位置查找元素，而是根據擁有相同標簽名的子元素中的數字順序查找第一個元素。

• :last-of-type – 匹配每種類型的最后一個子元素。

• nth-last-of-type(an+b) – 根據元素類型以及特定公式選擇元素，從其中最后一個元素往前算，類似于：nth-last-child。

• :not() – 匹配的元素不匹配括號內的選擇器。括號內的選擇器必須是基礎選擇器，它只能指定元素本身，無法用于排除祖先元素，同時不允許包含另一個排除選擇器。

• :focus – 匹配通過鼠標點擊、觸摸屏幕或者按Tab鍵導航而獲得焦點的元素。

• :hover – 匹配鼠標指針正懸停在其上方的元素。

• :root – 匹配文檔根元素。對HTML來說，這是元素，還可以應用到XML或者類似于XML的文檔上，比如SVG。

• :disabled – 匹配已禁用的元素，包括input、select以及button元素。

• :enabled – 匹配已啟用的元素，即那些能夠被激活或者接受焦點的元素。

• :checked – 匹配已經針對選定的復選框、單選按鈕或選擇框選項。

• :invalid – 根據輸入類型中的定義，匹配有非法輸入值的元素。

• :valid – 匹配有合法值的元素。

• :required – 匹配設置了required屬性的元素。

• :optional – 匹配沒有設置required屬性的元素。
  #偽元素選擇器
  偽元素類似于偽類，但是它不匹配特定狀態的元素，而是匹配在文檔中沒有直接對應HTML元素的特定部分。
  偽元素選擇器可能只匹配元素的一部分，甚至向HTML標記中未定義的地方插入內容。

• ::before – 創建一個偽元素，使其成為匹配元素的第一個子元素。該元素默認是行內元素，可用于插入文字、圖片或其他形狀。必須指定content屬性才能讓元素出現，例如：.menu::before。

• ::after – 創建一個偽元素，使其成為匹配元素的最后一個子元素。該元素默認是行內元素，可用于插入文字、圖片或其他形狀。必須指定content屬性才能讓元素出現，例如：.menu::after。

屬性選擇器

屬性選擇器用于根據HTML屬性匹配元素。其優先級與一個類選擇器（0,1,0）相等。

• [attr] – 匹配的元素擁有指定屬性attr，無論屬性值是什么，例如：input[disabled]?。
• [attr=“value”] – 匹配的元素擁有指定屬性attr，且屬性值等于指定的字符串值，例如：input[type=“radio”]?。
• [attr^=“value”] – “開頭”屬性選擇器。
• [attr$=“value”] – “結尾”屬性選擇器。
• [attr＊=“value”] – “包含”屬性選擇器。
• [attr~=“value”] – “空格分隔的列表”屬性選擇器。