CSS三個特性:層疊性、繼承性、優先順序
CSS 有三個非常重要的三個特性:層疊性、繼承性、優先順序:
1. 層疊性
相同選擇器給設定相同的樣式,此時一個樣式就會覆蓋(層疊)另一個衝突的樣式。層疊性主要解決樣式衝突的問題。
層疊性原則:
樣式衝突,遵循的原則是就近原則,哪個樣式離結構近,就執行哪個樣式。
樣式不衝突,不會層疊。
CSS 層疊性口訣:長江後浪推前浪,前浪死在沙灘上。
2.繼承性
現實中的繼承: 我們繼承了父親的姓
CSS中的繼承: 子標籤會繼承父標籤的某些樣式,如文字顏色和字號。簡單的理解就是:子承父業。
恰當地使用繼承可以簡化程式碼,降低 CSS 樣式的複雜性
子元素可以繼承父元素的樣式(text-,font-,line-這些元素開頭的可以繼承,以及color屬性)
繼承性口訣:龍生龍,鳳生鳳,老鼠生的孩子會打洞。
行高的繼承性
body {
font:12px/1.5 Microsoft YaHei;
}
注意:
行高可以跟單位也可以不跟單位
如果子元素沒有設定行高,則會繼承父元素的行高為 1.5
此時子元素的行高是:當前子元素的文字大小 * 1.5
body 行高 1.5 這樣寫法最大的優勢就是裡面子元素可以根據自己文字大小自動調整行高
3.優先順序
優先順序的選擇器權重如下表所示。
優先順序注意點:
1. 權重是有4組數字組成,但是不會有進位。
1. 可以理解為類選擇器永遠大於元素選擇器, id選擇器永遠大於類選擇器,以此類推..
2. 等級判斷從左向右,如果某一位數值相同,則判斷下一位數值。
3. 可以簡單記憶法: 萬用字元和繼承權重為0, 標籤選擇器為1,類(偽類)選擇器為10, id選擇器100, 行內樣式表為1000, !important 無窮大.
4. 繼承的權重是0,如果該元素沒有直接選中,不管父元素權重多高,子元素得到的權重都是0。
權重疊加:如果是複合選擇器,則會有權重疊加,需要計算權重。
div ul li ------> 0,0,0,3 .nav ul li ------> 0,0,1,2
a:hover -----—> 0,0,1,1
.nav a ------> 0,0,1,1
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69996644/viewspace-2789536/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- CSS的三大特性(繼承、層疊和優先順序)CSS繼承
- CSS三大特性(層疊性,繼承性,權重)CSS繼承
- html優先順序和層疊性HTML
- 好程式設計師HTML5培訓教程-css樣式的繼承性、層疊性 、優先順序程式設計師HTMLCSS繼承
- CSS樣式表的繼承性和層疊性CSS繼承
- CSS 元素層疊順序CSS
- CSS優先順序CSS
- CSS的特性之層疊性介紹CSS
- css 層疊上下文和層疊順序CSS
- css元素層疊順序詳解CSS
- [CSS LEARN]層疊上下文、層疊等級、層疊順序CSS
- CSS學習摘要-層疊和繼承CSS繼承
- HTML中設定多個class屬性css的優先順序,css樣式覆蓋HTMLCSS
- css屬性的可繼承性CSS繼承
- css可繼承屬性和非繼承屬性一覽CSS繼承
- Python例項屬性的優先順序分析Python
- CSS 屬性宣告順序CSS
- css 選擇器優先順序CSS
- css的繼承性及特例CSS繼承
- 徹底搞懂CSS層疊上下文、層疊等級、層疊順序、z-indexCSSIndex
- 層疊上下文與層疊順序
- c運算子優先順序表-最全c語言運算子優先順序和結合性對照表C語言
- CSS 選擇器的優先順序CSS
- 何為CSS 樣式優先順序CSS
- CSS font 複合屬性順序CSS
- CSS 選擇器優先順序規則CSS
- CSS之選擇器及其優先順序CSS
- CSS之CSS和html整合方式及優先順序CSSHTML
- 強大的CSS:var變數的區域性作用域(繼承)特性CSS變數繼承
- 深入理解CSS選擇器優先順序CSS
- CSS3選擇器及優先順序CSSS3
- python運算子及優先順序順序Python
- 【freertos】011-訊號量、互斥量及優先順序繼承機制原始碼分析繼承原始碼
- Android程式優先順序Android
- 中斷優先順序
- Yacc使用優先順序
- 真正理解"CSS選擇器的優先順序"CSS
- CSS入門十二:選擇器的優先順序CSS