淺談CSS繼承及優先級

繼承是很有用的機制,有了它就可以避免給一個元素的所有後代重複應用相同的樣式。如果你要設置的屬性是一個繼承屬性,那麼應該考慮是否直接設置到父元素上。合理的使用繼承,有助於減少選擇符的數量,降低複雜性
不過,如果有大量的元素繼承了各種不同的樣式,那麼查找樣式的來源也會比較麻煩。

不可繼承的:
display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi

內聯元素可繼承
letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction

終端塊狀元素可繼承:text-indent和text-align
列表元素可繼承:list-style、list-style-type、list-style-position、list-style-image
表格元素可繼承:border-collapse
所有元素可繼承:visibility和cursor

繼承中的特殊
1、a標籤的字體顏色不能被繼承
2、< h1 > ---- < h6 >標籤字體的大小不能被繼承
因爲他們都是一個默認值

繼承的屬性值沒有特殊性,連 0 都說不上。這意味着使用特殊性爲 0 的通用選擇符( * )設置的樣式都可以覆蓋繼承的樣式。

優先級:
!important > 內聯樣式 > ID選擇器 > 類選擇器 = 僞類選擇器 = 屬性選擇器 > 標籤 > 通配符 > 繼承 > 瀏覽器默認屬性

元素選擇符的權值:
元素標籤(派生選擇器):1
class選擇符:10
id選擇符:100
內聯樣式權值最大爲1000

優先級就近原則,同權重情況下樣式定義最近者爲準

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章