摘要：表示的是滿足第一個(gè)選擇器的前提下，從它匹配到的元素后，去尋找位于同一層級(jí)，且在該元素后面的所有滿足第二個(gè)選擇器的元素。

本篇文章已授權(quán)微信公眾號(hào) dasu_Android（大蘇）獨(dú)家發(fā)布

聲明

本系列文章內(nèi)容全部梳理自以下四個(gè)來(lái)源：

• 《HTML5權(quán)威指南》
• 《JavaScript權(quán)威指南》
• MDN web docs
• Github:smyhvae/web

作為一個(gè)前端小白，入門(mén)跟著這四個(gè)來(lái)源學(xué)習(xí)，感謝作者的分享，在其基礎(chǔ)上，通過(guò)自己的理解，梳理出的知識(shí)點(diǎn)，或許有遺漏，或許有些理解是錯(cuò)誤的，如有發(fā)現(xiàn)，歡迎指點(diǎn)下。

正文-CSS基礎(chǔ)

1.結(jié)構(gòu)和語(yǔ)法

首先需要清楚，CSS 職責(zé)是控制 HTEM 文檔里的文本內(nèi)容在網(wǎng)頁(yè)上樣式呈現(xiàn)的效果，寫(xiě)的每一個(gè)樣式最終是通過(guò)選擇器作用到具體的元素上面。

工作原理

互聯(lián)網(wǎng)其實(shí)都是通過(guò)網(wǎng)頁(yè)相互連接組成的，每個(gè)網(wǎng)頁(yè)都是一份 HTML 文檔，因此瀏覽器與后端的首次通信是以 HTML 文檔為基準(zhǔn)，那么整個(gè)流程的第一步也就是解析 HTML 文檔。

如果在解析 HTML 文檔過(guò)程中發(fā)現(xiàn)有通過(guò) 標(biāo)簽引用了外部的 CSS 文件時(shí)，那么瀏覽器會(huì)去下載相對(duì)應(yīng)的 CSS 文件。

當(dāng) HTML 文檔解析完畢后會(huì)生成一個(gè) DOM 文檔結(jié)構(gòu)，DOM 文檔結(jié)構(gòu)中記錄著每個(gè)節(jié)點(diǎn)的元素，各元素之間的關(guān)系，有點(diǎn)類似于 Android 中的 View 樹(shù)。

最后，通過(guò) CSS 的選擇器將相對(duì)應(yīng)的樣式作用到 DOM 中選擇器找到的元素節(jié)點(diǎn)，然后瀏覽器渲染呈現(xiàn)在網(wǎng)頁(yè)上。

結(jié)構(gòu)

以上是一個(gè) CSS 的典型結(jié)構(gòu)，總共由兩部分組成：選擇器 + 樣式

{} 大括號(hào)內(nèi)部的都是具體的某種樣式，可用來(lái)控制元素的背景、大小、排版位置等樣式效果。而 {} 左邊的則是選擇器，用來(lái)指定說(shuō)后面跟隨的樣式列表要作用到 HTML 文檔中的哪個(gè)元素上。

選擇器類型很多，規(guī)則也很多，因此會(huì)有一種現(xiàn)象，就是某個(gè)元素被不止一個(gè)選擇器匹配到，如果某個(gè)樣式屬性起沖突了，那么就會(huì)按照一定的優(yōu)先級(jí)順序處理。

樣式屬性也很多，具體也后面介紹，但有一點(diǎn)需要先明確一下，如果使用了未知的樣式屬性，或者給某個(gè)樣式屬性賦予了無(wú)效值，那么該樣式屬性會(huì)被視為無(wú)效，瀏覽器的 CSS 引擎會(huì)完全忽略它。

盒模型

跟 Android 很類似，每個(gè)元素在頁(yè)面上都是占據(jù)一個(gè)矩形區(qū)域，也分 margin 和 padding，唯一不同的就是這里的模型多了個(gè) border，雖然在 Android 中也有 border 的概念，但它是在 padding 區(qū)域內(nèi)的，不多帶帶占據(jù)某塊區(qū)域，所以這里需要區(qū)分一下。

因此，一個(gè)元素在頁(yè)面上的寬高就是由四個(gè)部分共同影響的了：content 區(qū)域，padding 區(qū)域，border 區(qū)域，margin 區(qū)域。

需要注意的是，上圖中的盒子模式的 box-sizing 屬性為默認(rèn)值 content-box 模式。

這種模式下，width 和 height 指的只是content區(qū)域的寬高。

box-sizing 屬性的取值有：content-box, padding-box, border-box, margin-box。四種，對(duì)應(yīng)的就是指明 width 和 height 表示的是包含哪些區(qū)域的寬高。

使用方式

CSS 基本結(jié)構(gòu)是由選擇器和樣式屬性列表組成，那么如何跟 HTML 文檔關(guān)聯(lián)起來(lái)使用呢？一共有三種方式：

• 內(nèi)嵌樣式

使用 HTML 元素的全局屬性 style 聲明，僅影響一個(gè)元素，除非工作環(huán)境受限，比如只允許編輯 HTML 的 body，否則強(qiáng)烈不推薦這種方式。

示例：

點(diǎn)擊跳轉(zhuǎn)

• 內(nèi)部樣式表

在 HTML 中的 內(nèi)使用

• 外部樣式表

將 CSS 保存在一個(gè)獨(dú)立的擴(kuò)展名為 .css 的文件中，并在 HTML 的 ?里使用? ?元素中引用它，這種方法可以說(shuō)是最好的，因?yàn)槟憧梢允褂靡粋€(gè)樣式表來(lái)設(shè)置多個(gè)文檔的樣式，并且需要更新 CSS 的時(shí)候只要在一個(gè)地方更新。

2.選擇器

選擇器，顧名思義，就是將 css 代碼選擇到 HTML 文檔中具體的元素對(duì)象，并作用在它身上。

基本選擇器

基本選擇器其實(shí)是一些比較常用、簡(jiǎn)單的選擇器，包括：元素選擇器、id 選擇器、class 選擇器、屬性選擇器、組合選擇器。這些在第一篇前端入門(mén)1-基礎(chǔ)概念中已經(jīng)介紹過(guò)了，這里不就詳細(xì)說(shuō)了。

基本選擇器規(guī)則很簡(jiǎn)單，選擇器基本就是一兩個(gè)條件，滿足了即可匹配上，如 a.class，p#id 等，即使有稍微經(jīng)過(guò)組合，但仍舊不復(fù)雜，但有些應(yīng)用場(chǎng)景下需要通過(guò)復(fù)雜的規(guī)則，即需要滿足多個(gè)條件下才能匹配上。

屬性選擇器

在第一篇中介紹的屬性選擇器其實(shí)是最基本用法的一種，而它還支持其他很多規(guī)則的用法，如下：

也就是說(shuō)，屬性選擇器不僅可以用來(lái)匹配那些具有指定屬性的元素，還可以進(jìn)一步根據(jù)不同屬性值來(lái)匹配。

并集選擇器

結(jié)構(gòu)：<選擇器>, <選擇器>

并集選擇器是通過(guò) ， 逗號(hào)將不同選擇器組合使用的一種選擇器，這種情況下，各個(gè)選擇器之間是沒(méi)有任何關(guān)系，都是相互獨(dú)立的，就是他們具有相同的樣式屬性表而已。

這只是一種簡(jiǎn)便寫(xiě)法的用法而已，具有相同樣式屬性表的不同再?gòu)?fù)制粘貼，可以直接通過(guò) ，逗號(hào)將不同選擇器分開(kāi)即可。只有 HTML 文檔中的元素滿足其中一個(gè)選擇器即可。

示例:

a, h1, span, div {
    background-color: black;
}

上述示例中有四個(gè)選擇器含有同樣的樣式屬性，HTML 文檔中只要滿足其中一個(gè)選擇器即可被匹配到。

后代選擇器

結(jié)構(gòu)：<第一個(gè)選擇器> <第二個(gè)選擇器>

多個(gè)選擇器之間通過(guò)空格分隔開(kāi)的話表示這是一個(gè)后代選擇器，也就是說(shuō)，需要先滿足第一個(gè)選擇器的前提下，在第一個(gè)選擇器匹配到的元素的后代元素中去匹配第二個(gè)選擇器。

這里的后代包括了子孫后代。

示例：

p span {
    background-color: black;
}

第一個(gè)span
第二個(gè)span

以上示例中，選擇器要匹配的元素是位于 p 元素的后代元素中的 span 元素，因此第一個(gè) span 元素就不符合規(guī)則，而第二個(gè) span 則會(huì)被匹配到。

兒子選擇器

結(jié)構(gòu)：<第一個(gè)選擇器> > <第二個(gè)選擇器>

兒子選擇器是多個(gè)選擇器之間通過(guò) > 右箭頭符號(hào)連接，表示的是在滿足第一個(gè)選擇器的前提下，從它匹配到的元素的直接子元素中尋找第二個(gè)選擇器。

跟后代選擇器的區(qū)別就在于它只能在直接子元素中匹配第二個(gè)選擇器。

示例：

p > span {
    background-color: black;
}

第一個(gè)span
第二個(gè)span
第三個(gè)span

第一個(gè) span 元素不是 p 元素的后代，第二個(gè) span 元素是 p 元素的直接子元素，第三個(gè) span 元素是 p 元素的孫子元素，因此只有第二個(gè) span 元素滿足規(guī)則被匹配到。

兄弟選擇器

結(jié)構(gòu)：<第一個(gè)選擇器> + <第二個(gè)選擇器>

兄弟選擇器是多個(gè)選擇器之間通過(guò) + 加號(hào)連接。表示的是，在滿足第一個(gè)選擇器的前提下，從它匹配到的元素的緊跟著的位于同一層級(jí)的下一個(gè)元素，看該元素是否符合第二個(gè)選擇器。

也就是說(shuō)，兄弟選擇器，兩個(gè)選擇器所匹配的元素要求，位于同一層級(jí)，且相鄰。

示例：

p + a {
    background-color: #6a90d9;
}

第一個(gè)a
第二個(gè)a
第三個(gè)a
第四個(gè)a

上述示例中，同時(shí)滿足位于同一層級(jí)，且相鄰，且需要先滿足第一個(gè)選擇器的前提下，還滿足第二個(gè)選擇器這四個(gè)條件的 a 元素就是第三個(gè) a 元素了。

普通兄弟選擇器

結(jié)構(gòu)：<第一個(gè)選擇器> ~ <第二個(gè)選擇器>

普通兄弟選擇器，是多個(gè)選擇器之間通過(guò) ~ 波浪符號(hào)連接。表示的是滿足第一個(gè)選擇器的前提下，從它匹配到的元素后，去尋找位于同一層級(jí)，且在該元素后面的所有滿足第二個(gè)選擇器的元素。

兄弟選擇器只匹配相鄰的一個(gè)元素，而普通兄弟選擇器則是可以匹配位于元素后面的所有符合第二個(gè)選擇器的元素。

示例：

p ~ a {
    background-color: #6a90d9;
}

第一個(gè)a
第二個(gè)a
第三個(gè)a
第四個(gè)a

同時(shí)滿足同層級(jí)，且在 p 元素后面的兄弟元素有兩個(gè)，第三個(gè) a 元素和第四個(gè) a 元素，因此這里可以匹配到這兩個(gè)元素。

偽選擇器

選擇器的目的就是為了匹配到 HTML 文檔中的滿足條件的元素，然后將樣式屬性作用在元素上。

元素是什么，在基礎(chǔ)一節(jié)中有介紹過(guò)，元素其實(shí)就是包含了標(biāo)簽以及文本內(nèi)容的整塊內(nèi)容。因此被選擇器匹配到的元素，都是直接將 CSS 樣式作用到整個(gè)元素上，也就是作用到整個(gè)文本內(nèi)容上。

那么，如果有一些需求并不是直接去匹配 HTML 文檔中的具體元素，而是指定了一些狀態(tài)、行為，然后讓瀏覽器動(dòng)態(tài)去根據(jù)當(dāng)前情況選擇符合這些狀態(tài)、行為的元素。

或者有一些需求是并不想將 CSS 樣式作用到整個(gè)元素上，而是只作用到元素標(biāo)記的文本內(nèi)容的某一部分。

這個(gè)時(shí)候，這種選擇器就稱作偽選擇器，因?yàn)樗袇^(qū)別于普通選擇器的行為

偽選擇器總共分成兩種：偽元素選擇器，偽類選擇器

偽元素選擇器

當(dāng)偽選擇器最終將 CSS 作用的對(duì)象并不是整個(gè)元素，而是滿足條件的元素標(biāo)記的文本內(nèi)容的某一部分時(shí)，稱偽元素選擇器。

偽元素選擇器不多，如下：

偽元素選擇器的用法基本都是和其他選擇器組合使用，比如 p::first-line 表示匹配 p 元素標(biāo)記的文本內(nèi)容的首行部分。

而 :before 和 :after 與之前的選擇器都不大一樣，因?yàn)橹敖榻B的選擇器作用都只是用于匹配選擇 HTML 文檔中的元素或文本內(nèi)容而已。但這兩個(gè)偽元素選擇器會(huì)生成內(nèi)容，并插入到匹配到元素的文本內(nèi)容中去。

因此，它們的基本用法通常都是這樣：

a:before {
    content: "在文本內(nèi)容之前插入";
}
a:after {
    content: "在文本內(nèi)容之后插入";
}

有一種應(yīng)用場(chǎng)景很適合使用這兩種偽元素選擇器，當(dāng)需要對(duì)列表動(dòng)態(tài)的生成復(fù)雜的編號(hào)規(guī)則時(shí)，可以結(jié)合 :before 和 counter() 使用。在 CSS 中也是可以使用一些內(nèi)置的方法功能。

偽類選擇器

當(dāng)不是通過(guò) HTML 文檔中元素的一些基本性質(zhì)，比如 id，class，標(biāo)簽名，屬性這些基本特征來(lái)匹配這些元素時(shí)，就可以稱作偽類選擇器。

偽類選擇器是通過(guò)滿足一些指定狀態(tài)、行為下來(lái)匹配元素的一種選擇器，比如滿足是否獲取焦點(diǎn)等等。

偽類選擇器相對(duì)來(lái)說(shuō)，比較多，如下：

一些偽類選擇器看下說(shuō)明應(yīng)該就清楚怎么使用，不明白的再具體去查找相關(guān)文檔即可。

3.層疊算法

由于一個(gè)元素通常會(huì)被多個(gè)選擇器命中，而這些選擇器又有可能是通過(guò)不同方式作用到元素上，因此這里存在了兩種場(chǎng)景下的優(yōu)先級(jí)問(wèn)題，但請(qǐng)記住，只有當(dāng)作用到同一個(gè)元素上的樣式屬性起了沖突時(shí)才會(huì)存在優(yōu)先級(jí)問(wèn)題。

如果不同選擇器作用到同一個(gè)元素上，但它們各自的樣式屬性列表中沒(méi)有重復(fù)的，那就不存在沖突，也就不存在優(yōu)先級(jí)問(wèn)題，都會(huì)一起合并作用到元素上。

場(chǎng)景1：不同使用方式的優(yōu)先級(jí)

CSS 有三種使用方式，另外瀏覽器也有默認(rèn)樣式，因此這些構(gòu)成了一個(gè)優(yōu)先級(jí)順序：

1. 元素內(nèi)嵌樣式（全局屬性 style 定義的樣式）
2. 文檔內(nèi)嵌樣式（style 標(biāo)簽定義的樣式） 和 外部樣式（link 標(biāo)簽引入的外部 CSS 文件）
3. 瀏覽器中的用戶樣式
4. 瀏覽器中的默認(rèn)樣式

以上優(yōu)先級(jí)從高到低，同層級(jí)之間，如果存在沖突的樣式屬性的話，以文檔中最后出現(xiàn)的屬性為準(zhǔn)，采用覆蓋規(guī)則。

場(chǎng)景2：不同選擇器之間的優(yōu)先級(jí)

當(dāng)作用到同一個(gè)元素上的不同選擇器存在樣式屬性沖突時(shí)，優(yōu)先以場(chǎng)景1考慮優(yōu)先級(jí)，如果不存在場(chǎng)景1的情況，即起沖突的選擇器在場(chǎng)景1中處于同一層優(yōu)先級(jí)，那么才會(huì)考慮不同選擇器之間的優(yōu)先級(jí)。

1. id 選擇器
2. class 選擇器，屬性選擇器，偽類選擇器
3. 元素選擇器，偽元素選擇器

以上優(yōu)先級(jí)從高到低，同層級(jí)之間，如果存在沖突的樣式屬性的話，以文檔中最后出現(xiàn)的屬性為準(zhǔn)，采用覆蓋規(guī)則。

但，有時(shí)候，使用的是組合選擇器，那么這時(shí)候就需要依靠一定的算法來(lái)計(jì)算出誰(shuí)的優(yōu)先級(jí)高了，這個(gè)算法叫做層疊算法：

通過(guò)對(duì)以上不同選擇器賦予某個(gè)數(shù)值來(lái)計(jì)算整個(gè)組合選擇器的最終數(shù)值，然后比較大小。

比如，上面三個(gè)優(yōu)先級(jí)的選擇器中，1優(yōu)先級(jí)的表示100，2優(yōu)先級(jí)的表示10，3優(yōu)先級(jí)的表示1，以此來(lái)計(jì)算一個(gè)組合選擇器的數(shù)值大小。

通常來(lái)說(shuō)，組合選擇器不會(huì)過(guò)于離譜，長(zhǎng)達(dá)十幾個(gè)選擇器的組合，因此以上述賦予每個(gè)優(yōu)先級(jí)的數(shù)值足夠覆蓋絕大多數(shù)場(chǎng)景。

示例：

h1，和 #indentifier 都只是簡(jiǎn)單選擇器，不通過(guò)這種層疊算法計(jì)算也行。

h1 + p::first-letter 和 li > a[href*=”zh-CN”] > .inline-warning 這種比較復(fù)雜的組合選擇器，就可以根據(jù)賦予每一層級(jí)優(yōu)先級(jí)對(duì)應(yīng)的數(shù)值來(lái)進(jìn)行計(jì)算，最終根據(jù)數(shù)值大小比較誰(shuí)的優(yōu)先級(jí)高。

這種賦予不同優(yōu)先級(jí)某個(gè)具體數(shù)值具現(xiàn)化的思想叫做層疊算法，通常是用于比較復(fù)雜的組合選擇器時(shí)。

但實(shí)際開(kāi)發(fā)中，很少會(huì)需要用到層疊算法，掌握?qǐng)鼍?和場(chǎng)景2下簡(jiǎn)單的優(yōu)先級(jí)分辨理論基礎(chǔ)足夠了。實(shí)際開(kāi)發(fā)過(guò)程中，沒(méi)必要這么復(fù)雜，借助開(kāi)發(fā)工具或者運(yùn)行查看下效果就可以確認(rèn)誰(shuí)的優(yōu)先級(jí)高低了。

大家好，我是 dasu，歡迎關(guān)注我的公眾號(hào)（dasuAndroidTv），如果你覺(jué)得本篇內(nèi)容有幫助到你，可以轉(zhuǎn)載但記得要關(guān)注，要標(biāo)明原文哦，謝謝支持~