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

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

復(fù)合挑選器

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

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

雜亂挑選器

復(fù)合挑選器中心用連接符就能夠變成雜亂挑選器了，雜亂挑選器是針對一個元素的結(jié)構(gòu)來進(jìn)行挑選的。

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

CSS 偽類

偽類其實是一類十分多的內(nèi)容的簡略挑選器。

鏈接/行為

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

一旦運(yùn)用了:link 或許:visited 之后，咱們就再也無法對這個元素的文字色彩之外的特點進(jìn)行更改。為什么要這樣規(guī)劃呢？因為一旦咱們運(yùn)用了 layout 相關(guān)的特點，比如說咱們給:visited 的尺寸加大一點，它就會影響排班。這樣咱們就能夠經(jīng)過 JavaScript 的 API 去獲取這個鏈接是否被拜訪過了�？墒羌偃缭蹅兡苋〉面溄邮欠癖话菰L過了，那么咱們就能夠知道用戶拜訪過那些網(wǎng)站了，這個對于閱讀器的安全性來說是一個致命打擊。所以這兒也提醒一下咱們，不要以為做一些表現(xiàn)性的東西與安全沒有任何聯(lián)系，其實安全性是一個綜合的考量。CSS 它也能造成安全漏洞的。

樹結(jié)構(gòu)

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

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

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

邏輯型

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

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

CSS 偽元素

總共分為 4 種

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

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

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

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

before 和 after

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

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

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

<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 沒有任何的聯(lián)系的。假如說咱們的閱讀器供給的烘托的寬度不同，first-line 在兩個環(huán)境里邊它終括住的元素數(shù)量就不相同多了。所以咱們用這個挑選器的時分需要去根據(jù)需求的狀況運(yùn)用，很有可能在咱們開發(fā)機(jī)器上和用戶的機(jī)器上烘托出來的作用是不相同的！