css_03 | CSS——CSS 結構和層疊

時間 2019-11-06

標籤 css 結構層疊欄目 CSS 简体版

原文原文鏈接

本文推薦 PC 端閱讀~

本文版權歸 「公衆號 | 前端一萬小時」 全部，未經受權，請勿轉載！
複製代碼

css_03
複製代碼

1. 選擇器的優先級是如何計算的？
2. 什麼是 CSS 繼承？哪些屬性能繼承，哪些不能？
複製代碼

前言： 在上一篇《CSS 選擇器詳解》中，咱們文章一開始就談到了「結構樹」，也明白了以後的種種「選擇器」都是創建在有這個「結構樹」的基礎之上。這篇，咱們將詳細闡述「結構樹」之於「繼承」、「層疊」等的重要性。
① 繼承：繼承是指在結構樹中，從一個元素向其後代元素傳遞屬性值所採用的機制；
② 層疊：層疊是一個「過程」，是瀏覽器「考慮」的「過程」——瀏覽器在肯定應當向一個元素應用哪些值時，瀏覽器不只要考慮「繼承」，還要考慮「聲明的特殊性」，另外還須要考慮「聲明自己的來源」。css

1 特殊性/特定性

「特殊性/特定性」對於理解如何向文檔應用聲明很重要。
若是一個規則能「更準確」地選擇一個元素，那麼這個規則就更爲「特定/特殊」！
能夠經過計算的方法來獲得這個「特定性」，值越大，特定性越強：前端

例如：面試

h1 {
    color: red;
    background: yellow;
}  /*specificity=0001*/

p,div {
    font-family: sans-serif;
}  /*specificity=0002*/

#txa {
    width: 300px;
    height: 200px;
    margin-left: -12px;
}  /*specificity=0100*/

.done {
    text-decoration: line-through;
}  /*specificity=0010*/

li[class] {
    color: red;
    background:yellow;
}  /*specificity=0011*/
複製代碼

⚠️ 注：通配選擇器對一個選擇器的特定性沒有貢獻，其「特定性=0000」，雖全是 0 ，但這不表明他沒有「特定性」。反而須要記住的是：0 特定性比無特定性要強。
⚠️ 注：有時某個聲明可能很是重要，超過了全部其餘聲明，則在這些聲明結束分號前加上 !important 。
如：瀏覽器

h1 {
    color: red;
    background: yellow !important;
}
複製代碼

2 繼承

繼承是 CSS 中最基本的內容之一。bash

繼承的值沒有「特定性」，甚至連 0 特定性也沒有。所以咱們隨時能使用一個更「特定」的選擇器來覆蓋其從父選擇器繼承的屬性。性能

通常來說，若是樣式會影響你的文本外觀，則全部這些樣式都能「繼承」。如：字體顏色 color 、全部與字體相關的屬性:學習

font-family
font-size
font-weight
font-style
複製代碼

⚠️ 而大多數「框模型屬性」就不能繼承（包括外邊距、內邊距、背景和邊框），好比給 <body> 元素加了一個邊框樣式，不表明咱們但願這個「身體」裏全部的元素都有「邊框」。字體

3 層疊

CSS：Cascading Style Sheets 層疊樣式表。spa

CSS 基於的方法就是讓全部樣式「層疊」在一塊兒，這是經過結合「繼承」和「特殊性」作到的。code

層疊是一個「過程」，是瀏覽器「考慮」的「過程」——瀏覽器在肯定應當向一個元素應用哪些值時，瀏覽器不只要考慮「繼承」，還要考慮「聲明的特殊性」，另外還須要考慮「聲明自己的來源」。

站在「瀏覽器」的角度，它會進行如下幾步來決定應用什麼樣式：
第一步： 收集全部樣式表；

包括：Web 頁面做者寫的樣式表，讀者本身增長的樣式表，還有瀏覽器的默認樣式。

第二步： 找到全部匹配的聲明；

第三步： 對全部匹配的規則排序；

標誌 !important 的規則的權重要高於沒有 !important 標誌的規則。
按「來源」——創做人員、讀者、瀏覽器，對應用到給定元素的全部聲明排序。通常來講，創做人員的樣式要勝於讀者的樣式；有 !important 標誌的讀者樣式強於全部其餘樣式（包括有 !important 標誌的創做人員樣式）；創做人員樣式和讀者樣式都比瀏覽器默認樣式要強。

第四步： 按上文講的「特定性」計算值對全部聲明排序；

第五步： 按出現順序對應用到給定元素的全部聲明排序。

一個聲明在樣式表或文檔中越後出現，它的權重就越大；
若是一個樣式表中有導入的樣式表，通常認爲出如今導入樣式表中的聲明在前，主樣式表中的全部聲明在後。

4 對上篇文章中遺留問題的解答

a:link {
    color: blue;
}

a:visited {
    color: red;
}

a:hover {
    color: orange;
}

a:active {
    color：black;
}
複製代碼

如上一篇文章所說：咱們須要按以上順序來聲明連接樣式。

經過這篇的學習，咱們知道了緣由：

他們都有相同的權重、來源；
全部這些選擇器的「特定性」值都是同樣的：0011；
所以，順序上與元素匹配的最後一個選擇器纔會勝出。

即：

首先，正常狀況下，a 的顏色是「藍色」；
而後，當我鼠標放上去以後，:hover 在順序上在下邊，因此變爲「橙色」；
接着，當我鼠標按下去時，表示個人鼠標正在這個元素上，那麼 :link 、 :hover 、 :active 都生效，但按層疊規則，:active 在順序上的最下邊，故對以上產生覆蓋，因此變成「黑色」；
最後，當我點擊過這個連接以後，鼠標移開後，:link 和 :visited 生效，:visited 將 :link 覆蓋並永久生效。