CSS 選擇器是 CSS 中最基礎且最重要的概念之一，它用于“選擇”您想要設置樣式的 HTML 元素。簡略挑選器

• 星號 —— *
• 通用挑選器，能夠挑選任何的元素
• 類型挑選器｜type selector —— div svg|a
• 也叫做 type selector, 也便是說它挑選的是元素中的 tagName (標簽名) 特點
• tagName 也是咱們平常常用的的挑選器
• 可是因為 HTML 也是有命名空間的，它主要有三個：HTML、SVG、MathML
• 假如咱們想選 SVG 或許 MathML 里邊特定的元素，咱們就有必要要用到單豎線 | ，CSS挑選器里邊單豎線是一個命名空間的分隔符，而HTML 里邊命名空間分隔符是 冒號 : 。然后前面提到的命名空間是需要 @namespace 來聲明的，他們是合作運用的，可是這個命名空間的運用不是很頻繁，它的存在僅僅為了一個齊備性考慮，HTML 和 SVG當中僅有一個堆疊的元素名就只有一個 a
• 所以咱們能夠以為，類型挑選器便是一個簡略的文本字符串即可
• 類挑選器｜class selector —— .class-name
• 以 . 初的挑選器便是 class 挑選器，也是經典之一
• 它會挑選一個 class，咱們也能夠用空格做分隔符來擬定多個 class 的
• 這個 .class 只需匹配中其間一個就能夠了
• ID 挑選器｜id selector —— #id
• 以 # 初加上 ID 名選中一個 ID
• 這個是嚴厲匹配的
• ID 里邊是能夠加減號或許是其他符號的
• 特點挑選器｜attribute selector —— [attr=value]
• 它包括了 class 特點挑選器和 id 挑選器
• 這個挑選器的完整語法便是 attr=value，等于前面是特點名，后邊是特點值
• 這兒邊的等號前面能夠加 ～ 就表明像 class 相同，能夠支撐拿空格分隔的值的序列：attr~=value
• 假如在等號前面加單豎線，表明這個特點以這個值初即可：attr|=value
• 假如咱們對優先級沒有特別要求的話，咱們理論上是能夠用特點挑選器來代替 class 挑選器和 id 挑選器的
• 偽類 —— :hover
• 以 : 初的，它主要是一些特點的特別狀況
• 這個跟咱們寫的 HTML 沒有聯系，八成來自于交互和作用
• 一些偽類挑選器是帶有函數的偽類挑選器，這些咱們都是能夠去運用偽類來解決的
• 偽元素挑選器 —— ::before
• 一般來說是以 :: 雙冒號初的
• 實踐上是支撐運用單冒號的，可是咱們發起雙冒號這個寫法
• 因為咱們能夠一眼就看出這個是偽元素挑選器，和偽類區別開來
• 偽元素屬于選中一些本來不存在的元素
• 假如咱們不挑選它們，這個地方就不存在這個元素了，挑選后就會多了一個元素

復合挑選器

• <簡略挑選器><簡略挑選器><簡略挑選器>
• * 或則 div 有必要寫在前面

首要復合挑選器是以多個簡略挑選器構成的，只需把簡略挑選器挨著寫就變成一個復合挑選器了。它的語義便是咱們選中的元素有必要一起 match 幾個簡略挑選器，形成了 “與” 的聯系。

雜亂挑選器

復合挑選器中心用連接符就能夠變成雜亂挑選器了，雜亂挑選器是針對一個元素的結構來進行挑選的。

• <復合挑選器> <復合挑選器> —— 后代挑選器，單個元素有必要要有空格左邊的一個父級節點或許先人節點
• <復合挑選器> ">" <復合挑選器> —— 父子挑選器，有必要是元素直接的上級父元素
• <復合挑選器> "~" <復合挑選器> —— 鄰接聯系挑選器
• <復合挑選器> "+" <復合挑選器> —— 鄰接聯系挑選器
• <復合挑選器> "||" <復合挑選器> —— 雙豎線是 Selector Level 4 才有的，當咱們做表格的時分能夠選中每一個列

CSS 偽類

偽類其實是一類十分多的內容的簡略挑選器。

鏈接/行為

• :any-link —— 能夠匹配任何的超鏈接
• :link —— 還沒有拜訪過的超鏈接
• :link :visited —— 匹配所有被拜訪過的超鏈接
• :hover —— 用戶鼠標放在元素上之后的狀況，之前是只能對超鏈接收效，可是現在是能夠在許多元素中運用了
• :active —— 之前也是只對超鏈接收效的，點擊之后當前的鏈接就會收效
• :focus —— 便是焦點在這個元素中的狀況，一般用于 input 標簽，其實任何能夠取得焦點的元素都能夠運用
• :target —— 鏈接到當前的方針，這個不是給超鏈接用的，是給錨點的a 標簽運用的，便是當前的 HASH指向了當前的a 標簽的話就會激活target 偽類

一旦運用了:link 或許:visited 之后，咱們就再也無法對這個元素的文字色彩之外的特點進行更改。為什么要這樣規劃呢？因為一旦咱們運用了 layout 相關的特點，比如說咱們給:visited 的尺寸加大一點，它就會影響排班。這樣咱們就能夠經過 JavaScript 的 API 去獲取這個鏈接是否被拜訪過了。可是假如咱們能取得鏈接是否被拜訪過了，那么咱們就能夠知道用戶拜訪過那些網站了，這個對于閱讀器的安全性來說是一個致命打擊。所以這兒也提醒一下咱們，不要以為做一些表現性的東西與安全沒有任何聯系，其實安全性是一個綜合的考量。CSS 它也能造成安全漏洞的。

樹結構

• :empty —— 這個元素是否有子元素
• :nth-child() —— 是父元素的第幾個兒子（child）
• :nth-last-child() —— 與nth-child 相同，只不過從后往前數
• :first-child :last-child :only-child

:nth-child 是一個十分雜亂的偽類，里邊支撐一種語法，比如說能夠在括號里邊寫奇偶event 或許odd，也能夠寫4N+1、3N-1，這個就會分別匹配到整數的形態。因為這個是一個比較雜亂的挑選器，咱們就不要在里邊寫過于雜亂的表達式了，只用它來處理一下奇偶，逢3個多1個，逢4個多1個等等這種表達式。

其實empty 、nth-last-child、last-child、only-child 這兩個挑選器，是破壞了咱們之前在 《完成中學習閱讀器原理》中的提到的 CSS 核算的時機問題。咱們能夠幻想一下，當咱們在開始標簽核算的時分，必定不知道它有沒有子標簽。empty 影響不是特別大，可是last-child 的這個聯系其實仍是影響蠻大的。所以閱讀在完成這些的時分是做了特別處理的，要么便是閱讀器完成的不是特別好，要么便是閱讀器要消耗更大的性能來得以完成。所以主張咱們盡量避免大量運用這些。

邏輯型

• :not 偽類 —— 主流閱讀器只支撐簡略挑選器的序列（復合挑選器）咱們是沒有辦法在里邊寫雜亂挑選器的語法的
• :where :has —— 在 CSS Level 4 加入了這兩個十分強大了邏輯型偽類

這兒仍是想溫馨主張一下咱們，不主張咱們把挑選器寫的過于雜亂，咱們許多時分都能夠多加一點 class 去解決的。假如咱們的挑選器寫的過于雜亂，某種程度上意味著 HTML 結構寫的不合理。咱們不可是為了給閱讀器工程省費事，也不可是為了性能，而是為了咱們本身的代碼結構考慮，所以咱們不應該呈現過于雜亂的挑選器。

CSS 偽元素

總共分為 4 種

• ::before
• ::after
• ::first-line
• ::first-letter

::before 和::after 是在元素的內容的前和后，刺進一個偽元素。一旦應用了 before 和 after 的特點，declaration（聲明）里邊就能夠寫一個叫做content 的特點（一般元素是沒有辦法寫 content 的特點的）。content 的特點就像一個真正的 DOM 元素相同，能夠去生成盒，能夠參加后續的排版和烘托了。所以咱們能夠給他聲明border、background等這樣的特點。

能夠理解為：偽元素向界面上增加了一個不存在的元素。

::first-line 和::first-letter 的機制就不相同了。這兩個其實本來就存在 content 之中。他們顧名思義便是 選中“榜首行” 和選中 “榜首個字母”。它們 不是一個不存在的元素，是把一部分的文本括了起來讓咱們能夠對它進行一些處理。

before 和 after

在咱們概念里，咱們能夠以為帶有 before 偽元素的挑選器，會給他實踐選中的元素的內容前面增加了一個元素，咱們只需要經過他的 content 特點為它增加文本內容即可。（這兒咱們也能夠給偽元素賦予content: '' 為空的）所以咱們能夠任何的給 before 和 after 指定 display 特點，和不同元素相同比較自由的。

咱們在完成一些組建的時分，也會常常運用這種不污染 DOM 樹，可是能實踐發明視覺作用的方式來給頁面增加一些修飾性的內容。

<div>

  <::before/>

  content content content content

  content content content content

  content content content content

  content content content content

  <::after/>

div>

first-letter 和 first-line

first-letter 相當于咱們有一個元素把內容里邊的榜首個字母給括了起來。這個first-letter 咱們是能夠恣意聲明各種不同的特點的，可是咱們是無法改動它的 content 的。咱們應該都看到過報紙上的榜首個字母會比較大，然后會游離出來的作用，這個在 CSS 里邊咱們就能夠用::first-letter的偽元素挑選器了。運用這個來完成比較用 JavaScript 來完成就會愈加安穩和代碼愈加高雅一些。

<div>

  <::first-letter>c::first-letter>ontent content content content

  content content content content

  content content content content

  content content content content

div>

first-line 是針對排版之后的line，其實跟咱們源碼里邊的first line 沒有任何的聯系的。假如說咱們的閱讀器供給的烘托的寬度不同，first-line 在兩個環境里邊它終括住的元素數量就不相同多了。所以咱們用這個挑選器的時分需要去根據需求的狀況運用，很有可能在咱們開發機器上和用戶的機器上烘托出來的作用是不相同的！