文章位址
樣式衝突是css渲染過程要解決的乙個關鍵問題，樣式衝突主要由兩個原因造成：
元素包含了不同物件所賦予的樣式：瀏覽器、使用者、作者。其中，瀏覽器樣式是指不對元素賦予樣式時，元素所表現出來的樣式，也就是瀏覽器賦予的元素預設樣式；使用者樣式是指使用者通過瀏覽器外掛程式設定的樣式，比如色弱者會對文字顏色進行修改；作者樣式只是程式設計師所編寫的css樣式。
程式設計師經常會在css中對同一元素進行重複定義，這往往是因為程式設計師整體區域性的樣式編寫習慣造成的，當然這是好的習慣。
css設計了cascade機制通過確定樣式層疊的順序來解決樣式衝突的問題，其過程就是對所有衝突樣式按照其對應的優先順序進行排序，然後確定優先順序最高樣式為最終渲染樣式。我將該排序過程歸納為三個級聯的排序階段。
step1.對所有衝突樣式，按照設定其的物件優先順序順序進行排序；物件優先順序順序如下：
1.讀者樣式+!important
2.作者樣式+!important
3.預設樣式+!important
4.作者樣式
5.讀者樣式
6.預設樣式
step3.對優先順序相等的樣式最後按照申明時間從早到晚進行排序。
specificity可以看成是乙個∞進製的4位數。作者樣式的specificity值由定義其的選擇器決定，下表展示了各種選擇器所定義的樣式、html中的樣式、繼承樣式的specificity值對照表。組合選擇器(e f，e>f，e+f，e~f)的specificity值等於所有單選擇器specificity值的累加和。比如div.aside p的權specificity值=(0,0,0,1)+(0,0,1,0)+(0,0,0,1)=(0,0,1,2)；11個元素選擇器的specificity值(0,0,0,11)比乙個類選擇的specificity值(0,0,1,0)小。
selector
type example
specificity
通用選擇器
*0,0,0,0
元素選擇器
div0,0,0,1
偽元素選擇器
::first-line
0,0,0,1
類選擇器
.warning
0,0,1,0
偽類選擇器]
:hover
0,0,1,0
屬性選擇器
[type=」checkbox」]
0,0,1,0
id選擇器
content
0,1,0,0
html中的樣式
style=」color: red;」
1,0,0,0
繼承樣式
——0,0,0,0
其中，繼承樣式(inheritance)是指從上級元素繼承來的樣式。css規定，dom樹中的下層元素會繼承它上級父元素的部分樣式。css定義了每個樣式屬性的可繼承性，比如：padding, border, margin, background是不可繼承的，具體可查閱書籍《css pocket reference》。
更詳細的css選擇器介紹請見延伸閱讀[1]，偽類與偽元素的區別分析請見延伸閱讀[2]。
延伸閱讀：
[1] css選擇器備忘錄
[2] 偽類與偽元素的區別
css層疊樣式
css 四大核心 一 選擇器 二 盒子模型 實現網頁布局 三 浮動四 四 定位 了解css 概念 層疊樣式表 級聯樣式表 cascading style s heet 作用 美化網頁 通過css的方式給html標籤設定樣式 css語法 選擇器 類選擇器 語法 1.定義型別.自定義型別名 2.呼叫型別...
css層疊樣式
層疊樣式表 層疊 相同的樣式的不同值作用到同一元素的時候,會有樣式被覆蓋.樣式生效會有先後重要的順序.根據樣式優先順序,如果優先順序一樣,後寫會覆蓋先寫的.樣式表 元素視覺表現的集合.例如我們看到的寬高背景顏色等等 樣式是依附html而存在的,如果沒有標籤,樣式將毫無意義.最小影響法則 當我們建立乙...
css層疊樣式
用來調節標籤的樣式 注釋 標籤選擇器 元素選擇器 divid選擇器 d1類選擇器 c1樣式類名不要用數字開頭 通用選擇器 後代選擇器 標籤 空格 標籤 div span樣式只改變後代標籤，並不改變父類本身 兒子選擇器 只影響兒子，其他後代不影響 div span毗鄰選擇器，只影響div 後邊同一級別...