摘要：每個(gè)元素都有一組樣式屬性，這些屬性涉及元素在文檔流中顯示時(shí)的不同方面，比如在文檔流中的位置邊框背景顏色等等。選擇符和要應(yīng)用的樣式構(gòu)成一條規(guī)則。上下文選擇器嚴(yán)格來講應(yīng)該叫后代組合式選擇器。

原文地址:http://justclear.github.io/css-stylin-with-css-note-1

由于 CSS 作用的對(duì)象是 HTML ,所以作者在這章主要先講了一些基本的 HTML 標(biāo)簽的用法和結(jié)構(gòu)。

作者在這節(jié)主要講了一個(gè) HTML 頁面所需的最基本的文檔結(jié)構(gòu)如下：

首先 是 HTML5 中新的文檔類型聲明語法，相比 HTML4 的冗長(zhǎng)文檔類型聲明語法來說 HTML5 是大大的簡(jiǎn)化了。

作者在這一節(jié)介紹了兩個(gè)比較重要的概念————塊級(jí)元素和行內(nèi)元素，默認(rèn)情況下塊級(jí)元素會(huì)始終占居一行，而行內(nèi)元素并不會(huì)。除了 table 元素的 display 屬性比較特殊以外，基本上所有的 HTML 元素的 display 的屬性值要么是 block，要么是 inline。作者的一個(gè)思想是，無論你想了解哪個(gè) HTML 元素，第一個(gè)要問的問題就是：它是塊級(jí)元素還是行內(nèi)元素，然后在編寫標(biāo)記的時(shí)候預(yù)想到這個(gè)元素在初始狀態(tài)下是如何定位的，這樣才能進(jìn)一步想好將來怎么用 CSS 重新定位它，因?yàn)閴K級(jí)元素和行內(nèi)元素在定位上有很大的區(qū)別，后面的拓展會(huì)詳細(xì)說明。

塊級(jí)元素盒子（一個(gè)很重要的概念————盒模型，后面會(huì)詳細(xì)說明）會(huì)擴(kuò)展到與父元素同寬，這也是為什么塊級(jí)元素會(huì)占居一行的原因了，因?yàn)樗袎K級(jí)元素的父元素都是 body，而它的默認(rèn)寬度就是瀏覽器的視口（viewport）大小，所以默認(rèn)情況下塊級(jí)元素的寬度也和瀏覽器的視口一樣寬，這樣以來，一個(gè)塊級(jí)元素旁邊也就沒有空間來容納另一個(gè)塊級(jí)元素了。

相比于塊級(jí)元素會(huì)擴(kuò)展到與父元素同寬，然而行內(nèi)元素的行為卻是恰恰相反，它會(huì)盡量的「收縮包裹」其內(nèi)容（也是盒模型的概念），這也就是為什么幾個(gè)行內(nèi)元素會(huì)并排顯示在一行直到它們排滿一行才會(huì)另起一行，而每個(gè)塊級(jí)元素會(huì)直接另起一行的原因了。

拓展：

作者在這一節(jié)中并沒有對(duì)塊級(jí)元素和行內(nèi)元素的一些其他特性進(jìn)行詳細(xì)的解釋，在這里筆者對(duì)它們的一些特性知識(shí)進(jìn)行拓展。首先先列出一些常見的塊級(jí)元素和行內(nèi)元素：

div, form, table, header, aside, section, article, figure, figcaption, h1~h6, nav, p, pre, blockqoute, canvas, ol, ul, dl


span, a, img, label, input, select, textarea, br, i, em, strong, small, button, sub, sup, code

之前作者提到過無論你想了解哪個(gè) HTML 元素，第一個(gè)要問的問題就是：它是塊級(jí)元素還是行內(nèi)元素，因?yàn)樗鼈冊(cè)诤心Ｐ蜕系谋憩F(xiàn)有很大的不同，不過在了解它們的不同之前我們還得先知道另外一個(gè)概念————替換元素和非替換元素，其中替換元素就是指瀏覽器是根據(jù)元素的屬性來判斷具體要顯示的內(nèi)容的元素，比如 img 標(biāo)簽，瀏覽器是根據(jù)其 src 的屬性值來讀取這個(gè)元素所包含的內(nèi)容的，常見的替換元素還有 input 、textarea、 select、 object、 iframe 和 video 等等，這些元素都有一個(gè)共同的特點(diǎn)，就是瀏覽器并不直接顯示其內(nèi)容，而是通過其某個(gè)屬性的值來顯示具體的內(nèi)容，比如瀏覽器會(huì)根據(jù) input 中的 type 的屬性值來判斷到底應(yīng)該顯示單選按鈕還是多選按鈕亦或是文本輸入框。而對(duì)于非替換元素，比如 p、label 元素等等，瀏覽器這是直接顯示元素所包含的內(nèi)容。看到這里你應(yīng)該大概的知道了什么是替換元素和非替換元素了。

對(duì)著兩個(gè)概念有了大概的了解后就可以對(duì) block 和 inline 在盒模型上的表現(xiàn)差異進(jìn)行了解了，首先是 margin ，W3C 對(duì)其所支持了元素對(duì)象是這么定義的：

Applies to: all elements except elements with table display types other than table-caption, table and inline-table

英語不是很好，沒太明白這句話的意思，我的理解就是所有元素都支持 margin 除了 display 屬性值為 table-caption 和 table-inline 以外的所有表格顯示類型比如 table-row-group、 table-cell、 table-row 和 table-header-group等等,但是為了驗(yàn)證我的理解，我發(fā)先 display 屬性值為 table 的元素也支持，可能是我對(duì)原文標(biāo)準(zhǔn)的理解有誤。但還有一個(gè)要特別注意的是 margin-top 和 margin-bottom 兩個(gè)屬性比較特殊，它們對(duì)非替換行內(nèi)元素沒有效果，下面是 W3C 上對(duì)于 margin-top 和 margin-bottom 支持對(duì)象的介紹：

Applies to: all elements except elements with table display types other than table-caption, table and inline-table
These properties have no effect on non-replaced inline elements.

前面一句和之前對(duì) margin 的描述是一樣的，這毫無疑問，下面這句話的意思是這些（ margin-top 和 margin-bottom ）屬性對(duì)非替換行內(nèi)元素沒有效果比如 a 和 span，注意這里是非替換行內(nèi)元素而不單單是非替換元素或者是行內(nèi)元素。比如 img 就是一個(gè)行內(nèi)元素， margin-top 和 margin-bottom 對(duì)它是有效果的，因?yàn)樗且粋€(gè)替換元素而不是非替換元素，所以對(duì)于「 margin-top 和 margin-bottom 對(duì)行內(nèi)元素沒有效果」這種說法是不對(duì)的。

而對(duì)于 padding 的支持對(duì)象，W3C 是這么描述的：

all elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column

上面這句話的意思是除了表格顯示類型為 table-row-group、 table-header-group、 table-footer-group、 table-row, table-column-group 和 table-column 的元素不支持，其他所有的元素都支持。

但這里有些特殊情況需要注意的是，對(duì)行內(nèi)元素比如 span 和 img 設(shè)置左右內(nèi)邊距的效果是可見可，但是對(duì)行內(nèi)元素設(shè)置上下內(nèi)邊距在有些情況下是不可見的，這些情況又要分為是否為替換元素和是否設(shè)置了背景色，為了能更直觀的了解這些概念，我在這里做了個(gè)表格：

padding-top 和 padding-bottom 對(duì)于行內(nèi)元素是否可見：

所以對(duì)于「 padding-top 和 padding-bottom 對(duì)行內(nèi)元素沒有效果」這種說法也是不對(duì)的，因?yàn)樗鼈冎皇菍?duì)于沒有設(shè)置背景色的行內(nèi)非替換元素效果不可見而已，而對(duì)于行內(nèi)替換元素來說，不管是否設(shè)置了背景色都是有效果了，并且會(huì)把父元素?fù)伍_。

說了這么多 block 和 inline-block 的區(qū)別，其實(shí)除了這兩個(gè)常見的 display 屬性以外還有一個(gè)屬性也是非常常見的，那就是 inline-block ，沒錯(cuò)，這就是前面兩種情況的結(jié)合體，它既有 block 的特性又有 inline 的特性，比如把一個(gè) display 屬性值為 block 或者 inline 的元素屬性值設(shè)置成 inline-block 后，既可以用只對(duì)行內(nèi)元素有效的 text-align: center; 聲明對(duì)其進(jìn)行居中以外，還可以用 padding-top 和 padding-bottom 對(duì)元素設(shè)置上下內(nèi)邊距而無需對(duì)其設(shè)置背景色，并且能把父元素?fù)伍_。

對(duì)于塊級(jí)元素和行內(nèi)元素的拓展就暫時(shí)到這，如果有不明白或者不對(duì)的地方也歡迎指出。

作者在這一小節(jié)只要介紹了 HTML 結(jié)構(gòu)所對(duì)應(yīng)的文檔對(duì)象模型（DOM,Document Object Model）,DOM 是從瀏覽器的視角來觀察頁面中的元素以及每個(gè)元素的屬性，由此可以得出這些元素的一個(gè)家族樹。通過 DOM 可以很清晰的看出文檔中每個(gè)元素之間的關(guān)系。比如下面的 HTML 代碼的 DOM 的家族樹就如下圖：

    

        
The Document Object Model
        
The page"s HTML markup structure defines the DOM.
    

上面是一個(gè)非常簡(jiǎn)單的 DOM 結(jié)構(gòu)圖，由此你可以和直觀的看出 HTML 文檔流中每個(gè)元素之間的關(guān)系，比如到底是父子元素還是兄弟元素。

作者在本章主要講解了 HTML 標(biāo)簽是怎么為內(nèi)容提供結(jié)構(gòu)的，以及每個(gè)元素會(huì)在屏幕上生成什么樣子的盒子，比如是行內(nèi)盒子還是塊級(jí)盒子，最后又簡(jiǎn)單的講解了什么是 DOM ，它是瀏覽器中文檔的模型，而 CSS 可以修改 DOM 中的元素樣式屬性，從而修改頁面本身的布局和外觀。

在本章中作者主要講解了 CSS 如何對(duì) HTML 添加樣式的，并且解釋了層疊的工作機(jī)制比如當(dāng)元素的同一個(gè)屬性被多次設(shè)置樣式后到底應(yīng)該選擇何種樣式，這就要靠 CSS 的層疊機(jī)制來決定最終應(yīng)用哪種樣式了。

每個(gè) HTML 元素都有一組樣式屬性，這些屬性涉及元素在文檔流中顯示時(shí)的不同方面，比如在文檔流中的位置、邊框、背景、顏色等等。CSS 就是一種先選擇 HTML 元素，然后設(shè)定選中元素 CSS 屬性的機(jī)制。CSS 選擇符和要應(yīng)用的樣式構(gòu)成一條 CSS 規(guī)則。

上下文選擇器的格式如下：

標(biāo)簽1 標(biāo)簽2 ｛ 聲明｝

其中標(biāo)簽2就是我們要選擇的目標(biāo)，而且只有在標(biāo)簽1是標(biāo)簽2的祖先元素（不一定是父級(jí)元素）的情況下才會(huì)被選中。上下文選擇器嚴(yán)格來講應(yīng)該叫「后代組合式選擇器（Descendant Comninator Selector）」。

還有一點(diǎn)要注意的是，上下文選擇器以空格作為分隔符，而分組選擇器則以逗號(hào)作為分隔符，不要弄混。

前面一節(jié)作者介紹的上下文選擇器是以某個(gè)祖先元素作為上下文的，只要目標(biāo)元素在 DOM 結(jié)構(gòu)「上游」存在這么一個(gè)祖先元素即可，無論這個(gè)祖先元素和目標(biāo)元素隔了多少層級(jí)都沒有關(guān)系，但有的時(shí)候我們需要比「某個(gè)祖先元素」更具體的上下文，這時(shí)候我們就可以使用一些特殊的選擇器了，比如自選擇器 >、 緊鄰兄弟選擇器 +、一般兄弟選擇器 ~ 和通用選擇器 *。

標(biāo)簽1 > 標(biāo)簽2

這里的標(biāo)簽2必須是標(biāo)簽1的子元素，也就是說標(biāo)簽1必須是標(biāo)簽2的父元素，而不能是標(biāo)簽2的任何其他祖先元素。

標(biāo)簽1 + 標(biāo)簽2

在這里標(biāo)簽2必須緊跟在兄弟標(biāo)簽1的后面，否則無效。

標(biāo)簽1 ~ 標(biāo)簽2

在這里標(biāo)簽2必須跟（不一定要緊跟，只需在標(biāo)簽1的后面即可）在其兄弟標(biāo)簽1后面。

*

通用選擇器 * 是一個(gè)是一個(gè)通配符，代表文檔流中的任意元素，不過通用選擇器 * 通常會(huì)搭配一些其他選擇器來使用，比如：

section > *

代表 section 的所有子元素，不過一般情況下很少通過通配符來選擇某個(gè)元素下的所有子元素，因?yàn)檫@涉及到瀏覽器性能問題，它會(huì)影響網(wǎng)頁的渲染時(shí)間，我們寫的時(shí)候是從左到右寫的，但是瀏覽器渲染卻是從右到左的，就上面這段代碼來說，瀏覽器會(huì)先遍歷所有的元素，然后在找出哪些元素的父元素是 section，另外舉一個(gè)例子，有選擇器：

div.container #main > .article {}

瀏覽器在渲染時(shí)，先把所有類中包含 article 的元素取出來組成一個(gè)集合，然后對(duì)每一個(gè)集合中的元素進(jìn)行遍歷，如果元素的父元素的 id 不為 main 則把元素從集合中刪去。 再然后從這個(gè)元素的父元素開始向上找，沒有找到一個(gè)標(biāo)簽名為 div 并且類名中有 container 的元素，就把元素從集合中刪去，直到匹配所有的條件，所以在能不使用通配符的情況就盡量不要使用它。

作者在這一節(jié)介紹了 id 和 class 選擇器，為我們選擇元素提供了另一種手段，利用它們可以不考慮元素在文檔流中的層次結(jié)構(gòu)，只要在元素中添加了 id 和 class 屬性和值，我們就可以通過它們的值來找到目標(biāo)元素。

可以給 id 和 class 屬性設(shè)定任何值，但不能以數(shù)字或者特殊符號(hào)開頭。

id 的用途是在頁面中唯一地標(biāo)識(shí)元素，所以每個(gè)頁面中每一個(gè) id 屬性值都是獨(dú)一無二的。而 class 的目的是為了標(biāo)識(shí)一組具有相同特征的元素，也就是說一個(gè)頁面中可以出現(xiàn)多個(gè)相同的類。

對(duì)于什么時(shí)候用 id 這個(gè)問題作者的觀點(diǎn)是：

每一個(gè)頂級(jí)區(qū)域都應(yīng)該添加一個(gè) id，從而得到非常明確的上下文關(guān)系，以便編寫 CSS 時(shí)只選擇嵌套在相應(yīng)區(qū)域內(nèi)的標(biāo)簽。

對(duì)于什么時(shí)候使用 class，由于 class 的目的是為了標(biāo)識(shí)一組具有相同特征的元素，所以如果當(dāng)頁面中有一組元素具有某種相同的特征，就應(yīng)該毫不猶豫的時(shí)候 class 了。

但是這里也應(yīng)該注意不要亂用類，避免造成類泛濫，例如：

上面這個(gè)例子就是一個(gè)典型的類泛濫。

對(duì)于什么時(shí)候用 id 和什么時(shí)候用 class，我想每個(gè)人都有不同的看法，這里寫說一下筆者的觀點(diǎn)，筆者認(rèn)為能不實(shí)用 id 就盡量不使用 id，實(shí)際情況是筆者基本不在 CSS 中使用 id，因?yàn)樵?CSS 的層疊機(jī)制中，id 的權(quán)重是 class 的10倍，其實(shí)很多情況下對(duì)某個(gè)元素設(shè)置某個(gè)不一樣的樣式來覆蓋之前的樣式并沒有效果就是因?yàn)橹暗臉邮綑?quán)重太高，而為了達(dá)到效果就要編寫權(quán)重更高的選擇器，所以只有在某個(gè)元素需要被 JavaScript 找到的時(shí)候才會(huì)在某個(gè)元素中添加 id ，以便可以通過 document.getElementById() 方法來快速獲取需要的元素。

屬性選擇器包括屬性名選擇器和屬性值選擇器，它們是通過元素的屬性和值來獲取元素的：

標(biāo)簽名[屬性名]
標(biāo)簽名[屬性名="屬性值"]

例如：

img[title] {border: 2px solid blue;}
a[target="_blank"] {background-image: url(_blank.png);}

上面第一段代碼意思是，如果某個(gè) img 標(biāo)簽帶有 title 這個(gè)屬性，那么就為它添加一個(gè)寬度為 2px 的藍(lán)色實(shí)線邊框。第二段代碼的意思是，如果某個(gè) a 標(biāo)簽帶有 target 這個(gè)屬性，并且這個(gè)屬性的值為 _blank 那么就為這個(gè)元素添加一個(gè)背景圖。

拓展：

其實(shí)除了以上兩種屬性選擇器，還有其他幾種屬性選擇器作者并沒有列出來，這里這幾種其他的屬性選擇器作一個(gè)簡(jiǎn)單的介紹：

標(biāo)簽名[name^="value"]  讓你匹配屬性為 `name` 并且屬性值以 `value` 開始的標(biāo)簽，如:a[href^= "http://"]則匹配所有具有 `href` 屬性并且屬性值以 `http://` 開始的標(biāo)簽。

標(biāo)簽名[name$="value"]  讓你匹配屬性為 `name` 并且屬性值以 `value` 結(jié)束的標(biāo)簽，如:a[href$=".com"]則匹配所有具有 `href` 屬性并且屬性值以 `http://` 結(jié)束的標(biāo)簽。

標(biāo)簽名[name*="value"]  讓你匹配屬性為 `name` 并且屬性值包含 `value` 的標(biāo)簽，如:a[href*= "renren"]則匹配所有具有 `href` 屬性并且屬性值包含 `http://` 的標(biāo)簽。

標(biāo)簽名[name|="value"]  讓你匹配屬性為 `name` 或者以 `name-` 開始的標(biāo)簽，如:p[lang|= "en"]則匹配具有 `lang` 屬性的 `p` 標(biāo)簽，不管其屬性值是 `en` 還是 `en-us` 。

標(biāo)簽名[name~="value"]  讓你匹配屬性為 `name` 并且其屬性值是具有多個(gè)空格分隔的值，其中一個(gè)值為 `value`，如有：
Learn More
就可以用 p[title~="learn"] 來選擇這個(gè)元素。

你應(yīng)該注意到了這些屬性選擇器與前面兩種屬性選擇器之間的差別了，通過這些屬性選擇器我們可以很容易的做出許多意想不到的效果，比如：

a[href$=".pdf"] {background-image: url(pdf.png);}

比如上面這段代碼就為鏈接是 pdf 文檔連接的 a 標(biāo)簽添加一個(gè)表示這個(gè)鏈接是 pdf 文檔的圖片，而其他 href 屬性的值不是以 .pdf 結(jié)尾的 a 標(biāo)簽就不會(huì)應(yīng)用這條樣式聲明，讓用戶很清楚的判斷這是一個(gè)什么類型的鏈接。

偽類這個(gè)叫法源自它們與類相似，但實(shí)際上并沒有類會(huì)附加到標(biāo)記中的標(biāo)簽上，偽類分為兩種：

UI（User Interface，用戶界面）偽類：會(huì)在 HTML 元素處于某個(gè)狀態(tài)時(shí)（比如鼠標(biāo)指針位于連接上），為該元素應(yīng)用 CSS 樣式。

結(jié)構(gòu)化偽類：會(huì)在標(biāo)記中純?cè)谀撤N結(jié)構(gòu)上的關(guān)系時(shí)（比如某個(gè)元素是一組元素的第一個(gè)或者最有一個(gè)元素），為相應(yīng)的元素應(yīng)用 CSS 樣式。

鏈接偽類

link: 鏈接就在那兒等著用戶點(diǎn)擊。

visited:用戶此前點(diǎn)擊過這個(gè)鏈接。

hover:鼠標(biāo)指針正懸停在連接上。

active:鏈接正在i被點(diǎn)擊（鼠標(biāo)在元素上按下，還沒有釋放）。

注意以上幾種鏈接偽類要按一定的順序才有效果，為了方便記憶作者是這么建議的："LoVe?HA!"，大寫字母就是每個(gè)偽類的第一個(gè)字母，其實(shí)也可以這么記： "LoVe,HAte"，其實(shí)都差不多就是了。

一個(gè)冒號(hào)（:）表示偽類，兩個(gè)冒號(hào)（::）表示 CSS3 新增的偽元素。

:focus 偽類

表單中的文本字段在用戶單擊它時(shí)會(huì)獲得焦點(diǎn)，例如：

   input:focus {border: 1px solid blud;}

這段代碼的意思就是當(dāng)用戶單擊表單中的文本字段的時(shí)候，為該 input 標(biāo)簽添加寬度為 1px 的藍(lán)色實(shí)線邊框，需要注意的是，偽類的冒號(hào)要緊跟著標(biāo)簽名，之間不能有空格，否則該聲明無效。

:target 偽類

如果用戶點(diǎn)擊一個(gè)指向頁面中其他元素的鏈接，則哪個(gè)元素就是目標(biāo)（target），可以用 :target 偽類選中它，比如：

   More Information

位于頁面其他地方、id 為 more-info 的那個(gè)元素就是目標(biāo)元素，該元素可能是這樣的：

   
This is the information you are looking for.

那么 CSS 規(guī)則如下：

   #more-info:target {background: #eee;}

此時(shí)會(huì)在用戶點(diǎn)擊鏈接轉(zhuǎn)向 id 為 more-info 的元素時(shí)，該目標(biāo)元素的背景就會(huì)變成淺灰色。

first-child 、 last-child 和 nth-child(n)

   e:first-child
   e:last-child

first-child 和 last-child 分別代表一組同胞元素中的第一個(gè)元素和最后一個(gè)元素，而 nth-child(n) 則代表一組同胞元素中的任何一個(gè)元素，其中 n 表示一個(gè)整數(shù)（也可以是 odd-奇數(shù) 或 even-偶數(shù)）或者也可以是一個(gè)算數(shù)表達(dá)式（2n + 1），例如：

   

       
My Fast Pony
       
Steady Trotter
       
Slow Ol" Nag
   

   ul li:first-child {color: black;}
   ul li:nth-child(2) {color: red;}
   ul li:last-child {color: blue;}

上面的 HTML 應(yīng)用了上面的 CSS 規(guī)則后，無序列表的第一個(gè)元素字體顏色就會(huì)變成黑色，第二個(gè)元素變成紅色，最后一個(gè)元素就變成藍(lán)色。

顧名思義，偽元素就是文檔中若有實(shí)無的元素，下面是幾個(gè)比較常用的偽元素。

::first-letter 偽元素，比如：

    p::first-letter {font-size: 300%;}

這樣 `p` 標(biāo)簽的第一個(gè)字母大小就會(huì)變成原來的 3 倍了，而其他元素則不會(huì)。

::first-line 偽元素：可以選中文本段落的第一行。

::before 和 ::after 偽元素

    e::before
    e::after

可用在特定元素前面或后面添加特殊內(nèi)容，比如：

    
25

    .age::before { content: "Age: ";}
    .age::after { content: " years";}

這里需要注意的是，對(duì)于 `::before` 和 `::after` 偽元素，其 `content` 屬性是必須的，還有就是搜索引擎不會(huì)取得偽元素的信息（因?yàn)樗谖臋n流中并不存在），因此不要通過偽元素添加一些對(duì)搜索引擎來說是重要的內(nèi)容。

拓展：

其實(shí)偽元素前面冒號(hào)可以是兩個(gè)也可以是一個(gè)，但是為了區(qū)別偽類，筆者建議大家還是使用兩個(gè)冒號(hào)。還有一個(gè)要注意的是，比如通過 ::before 和 ::after 偽元素為 class 為 pseudo-element 添加兩個(gè)偽元素，則生成的兩個(gè)偽元素分別處于 pseudo-element 元素的內(nèi)部，也就是說是 pseudo-element 元素的子元素，并且分別位于 pseudo-element 元素的內(nèi)容的最前面和最后面，代碼如下：

    
Pseudo Element


.pseudo-element::after,
.pseudo-element::before {
    content: "";
}

如上圖所示，生成的兩個(gè)偽元素分別處于 pseudo-element 元素的內(nèi)部，并且分別位于 pseudo-element 元素的內(nèi)容 p 標(biāo)簽的前面和后面，而不是如下圖所示的位于 pseudo-element 元素外部的前面和后面：

層疊就是層疊樣式表中的層疊，是一種樣式在文檔層次中逐層疊加的過程，目的是讓瀏覽器面對(duì)某個(gè)標(biāo)簽特定屬性值的多個(gè)來源確定最終使用哪個(gè)值。

層疊是 CSS 的核心機(jī)制，理解了它才能以最經(jīng)濟(jì)的方式寫出最容易改動(dòng)的 CSS,讓文檔外觀在達(dá)到設(shè)計(jì)要求的同時(shí)，也給用戶留下一些空間，讓他們能根據(jù)需要更改文檔的顯示效果。

作者在這一節(jié)中介紹了樣式的幾種來源：

瀏覽器默認(rèn)樣式表

用戶樣式表

作者鏈接樣式表

作者嵌入樣式

作者行內(nèi)樣式

作者在書中是這么描述的：

瀏覽器會(huì)按照上面的順序依次檢查每個(gè)來源的樣式，并在有定義的情況下，更新對(duì)每個(gè)標(biāo)簽屬性值的設(shè)定，整個(gè)檢查更新過程結(jié)束后，再將每個(gè)標(biāo)簽以最終設(shè)定的樣式顯示出來。

作者在這一節(jié)主要介紹了特指度的計(jì)算方法，相比作者個(gè)計(jì)算方式，筆者個(gè)人還是比較喜歡自己之前的計(jì)算方式，雖然差不多，如下：

// 首先規(guī)定四個(gè)等級(jí)：A - B - C - D

A 等級(jí)代表內(nèi)聯(lián)樣式：例如 style=" "，權(quán)值為：1000；

B 等級(jí)代表 ID 選擇器：例如 #main，權(quán)值為：100；

C 等級(jí)代表類、偽類和屬性選擇器： .class 和 [title]，權(quán)值為：10；

D 等級(jí)代表元素（標(biāo)簽）名或者偽元素選擇器：例如 p 和 ::after，權(quán)值為：1。

//計(jì)算完每個(gè)值后再將每個(gè)值加起來，哪個(gè)值大哪個(gè)值的權(quán)重就高。

例如:

body #main .class a[title]::after {}

我們先分析它由哪些選擇器構(gòu)成，上面這條規(guī)則有一個(gè) id 選擇器（#main），一個(gè)類選擇器（.class），一個(gè)屬性選擇器（[title]）、一個(gè)偽元素選擇器(::after)和兩個(gè)標(biāo)簽名選擇器（body 和 a），所以它的權(quán)重就等于：

 100 × 1 + 10 × 2 + 1 × 3 = 123

還有一點(diǎn)要注意的是，權(quán)重值 001(12) 與 0020 相比，任然是 0020 的權(quán)重更高，對(duì)于權(quán)重一樣的情況，則后聲明的樣式更高。

作者在本章介紹了 CSS 的一些規(guī)則，比如各種選擇器的使用，層疊機(jī)制，還有權(quán)重的計(jì)算。