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

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

復(fù)合挑選器

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

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

雜亂挑選器

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

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

CSS 偽類

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

鏈接/行為

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

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

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

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

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

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

邏輯型

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

這兒仍是想溫馨主張一下咱們，不主張?jiān)蹅儼烟暨x器寫的過于雜亂，咱們?cè)S多時(shí)分都能夠多加一點(diǎn) 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)一個(gè)偽元素。一旦應(yīng)用了 before 和 after 的特點(diǎn)，declaration（聲明）里邊就能夠?qū)懸粋�(gè)叫做content 的特點(diǎn)（一般元素是沒有辦法寫 content 的特點(diǎn)的）。content 的特點(diǎn)就像一個(gè)真正的 DOM 元素相同，能夠去生成盒，能夠參加后續(xù)的排版和烘托了。所以咱們能夠給他聲明border、background等這樣的特點(diǎn)。

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

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

before 和 after

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

咱們?cè)谕瓿梢恍┙M建的時(shí)分，也會(huì)常常運(yùn)用這種不污染 DOM 樹，可是能實(shí)踐發(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)于咱們有一個(gè)元素把內(nèi)容里邊的榜首個(gè)字母給括了起來。這個(gè)first-letter 咱們是能夠恣意聲明各種不同的特點(diǎn)的，可是咱們是無法改動(dòng)它的 content 的。咱們應(yīng)該都看到過報(bào)紙上的榜首個(gè)字母會(huì)比較大，然后會(huì)游離出來的作用，這個(gè)在 CSS 里邊咱們就能夠用::first-letter的偽元素挑選器了。運(yùn)用這個(gè)來完成比較用 JavaScript 來完成就會(huì)愈加安穩(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 是針對(duì)排版之后的line，其實(shí)跟咱們?cè)创a里邊的first line 沒有任何的聯(lián)系的。假如說咱們的閱讀器供給的烘托的寬度不同，first-line 在兩個(gè)環(huán)境里邊它終括住的元素?cái)?shù)量就不相同多了。所以咱們用這個(gè)挑選器的時(shí)分需要去根據(jù)需求的狀況運(yùn)用，很有可能在咱們開發(fā)機(jī)器上和用戶的機(jī)器上烘托出來的作用是不相同的！