當我們用 css 給乙個元素通過不同的方法新增了相同的屬性時，那麼瀏覽器該怎麼渲染這個元素的樣式呢，這就是層疊要做的事
使用了!important的的屬性的重要性 > 普通樣式 > 瀏覽器預設樣式
優先順序就是分配給指定的 css 宣告的乙個權重，它由 匹配的選擇器中的每一種選擇器型別的數值決定。選擇符的優先順序由選擇符本身的組成部分決定，乙個優先順序由四部分構成
0, 0, 0, 0行間樣式的優先順序為1, 0, 0, 0id 選擇器的優先順序為0, 1, 0, 0class、屬性、偽類選擇器的優先順序為0, 0, 1, 0標籤、偽元素選擇器的優先順序為0, 0, 0, 1*萬用字元選擇器的優先順序為0, 0, 0, 0:not()對優先順序沒有影響，但是，在:not()內部宣告的選擇器會影響優先順序
同樣的樣式優先順序高的一定會覆蓋低的，對於優先順序相同的後寫的會覆蓋先寫的。
但是如果出現了!important情況就不一樣了，帶有!important的樣式對優先順序沒有影響，但是瀏覽器會把重要的和不重要的樣式分開來處理。
也就是說，所有帶有!important的樣式會放在一起，普通的樣式放在一起；如果重要的和不重要的衝突肯定是按重要性來比使用重要的；如果重要的和重要的發生衝突也是用優先順序來解決問題。
>
divstyle
>
style
="background-color
: skyblue!important;
">
div>
在 vscode 中我們可以很清楚的看出我們選擇的元素的優先順序
css的很多屬性是可以繼承的，即我們給某個元素的父級設定屬性值，它也會自動應用該樣式，這就是繼承。
對於 非繼承屬性我們可以通過inherit關鍵字強行繼承
瀏覽器渲染每個元素的前提條件：該元素的所有css屬性必須有值
乙個元素，從所有屬性都沒有值，到所有的屬性都有值，這個計算過程，叫做屬性值計算過程
計算過程：
確定宣告值
將作者樣式表和瀏覽器預設樣式表中沒有衝突的樣式，作為css的屬性值
層疊衝突
對樣式表有衝突的宣告使用層疊規則，確定css屬性值
使用繼承
對仍然沒有值的屬性，若可以繼承，則繼承父元素的值
使用預設值
每個 css 屬性都有預設值，最後對仍然沒有值的屬性，使用預設值
這就可以解釋為什麼 a 元素不能繼承父級的顏色等相關問題了，因為瀏覽器給 a 元素設定了預設樣式。
屬性值的計算過程
乙個乙個元素，依次渲染，按照頁面文件的樹形目錄結構進行 渲染每乙個元素的前提條件 該元素的所有css屬性必須都有值 屬性值的計算過程 乙個元素，從所有屬性沒有值到所有屬性都有值的過程 1.確定宣告值 參考樣式表 作者樣式表，或者瀏覽器樣式表 中沒有衝突的宣告，作為css屬性值 2.層疊衝突 對樣式表...
css屬性值的層疊衝突規則
層疊衝突 同乙個樣式，多次用到同乙個元素，就會發生層疊衝突，需要對樣式表有衝突的申明使用層疊規則，確定css屬性值 color 000000 important 總體規則 選擇器選中的範圍越窄，越特殊 具體規則 通過選擇器，計算出乙個4位數 數值越大，屬性值的優先順序越高 千位 若果是內聯樣式，記1...
CSS屬性值的計算過程
瀏覽器渲染網頁 乙個元素乙個元素依次渲染，順序按照頁面文件的樹形目錄結構進行渲染的 渲染每個元素的前提條件，該元素的所有css屬性必須有值 乙個元素，從所有屬性都沒有值，到所有的屬性都有屬性值，這個計算過程，叫做屬性計算過程 html元素 到有值從沒有值到到有值的過程 確定宣告值 參考樣式表中沒有衝...