前面我們瞭解了 樣式的作用域的分類 和 欄目級作用域 。在權值中,還有一個很重要的因素,需要做下補充,起因是這樣的,有個同學在CSS森林羣裏問了個問題:根據樣式權值兩個關鍵的因素
- 權值的大小跟選擇器的類型和數量有關
- 樣式的優先級跟樣式的定義順序有關
可以知道,如果10個標籤選擇器的權值應該比一個類選擇的權值高,像這樣:
div div div div div div div div div div div{color:blue;}
.c10{color:red;}
<div class="c1">
<div class="c2">
<div class="c3">
<div class="c4">
<div class="c5">
<div class="c6">
<div class="c7">
<div class="c8">
<div class="c9">
<div class="c10">
<div>這段文字是什麼顏色?</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
div{color:blue;}
.c10{color:red;}
是不是跟想的不太一樣?難道前面所說的權值是有問題的?前面講的權值並沒有問題,不過漏了一個重要的規則: 繼承的權值小於0,0,0,1 。
- 樣式的繼承
- 指被包在內部的標籤將擁有外部標籤的樣式性質。
繼承最大的意義在於可以減少重複的定義,比如要定義整個頁面的文本顏色,只需要定義body的color樣式,body裏的所有標籤都會繼承body的color定義。是不是很方便?方便是相對的,當你想要爲body內部分標籤定義另一種文本顏色時,繼承也許會成爲增加重複定義、降低性能的禍首。
並不是所有的樣式定義都具有繼承的性質,整理了一下常用有繼承性的定義1,這些定義在使用的時候要比較注意。
簡單分析下上面的例子,最後一部分的代碼:
<div class="c10">
<div>這段文字是什麼顏色?</div>
</div>
當定義了c10後,根據權值,類定義的權值是0,0,1,0,應該是比div這個定義0,0,0,1要高的,但由於div是直接定義到標籤上的,比起從c10的定義中繼承來的定義權值更高。稍微改下就清楚了:
<div class="c1">
<div class="c2">
<div class="c3">
<div class="c4">
<div class="c5">
<div class="c6">
<div class="c7">
<div class="c8">
<div class="c9">
<div class="c10">
<p>這段文字是什麼顏色?</p>
<div>這段文字是什麼顏色?</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
從 修改後的例子 可以看到,p標籤繼承了c10的定義,顯示爲紅色。因此,在使用標籤選擇器的時候,應特別注意它的作用域,個人的建議是,除了最基本的reset之外,在公共作用域中最好不要使用標籤選擇器,在欄目級作用域中也應儘可能的少用。
1 常用有繼承性的樣式定義:
- text-indent
- text-align
- layout-flow
- writing-mode
- line-break
- white-space
- word-wrap
- list-style
- list-style-image
- list-style-position
- list-style-type
- font
- font-style
- font-variant
- font-weight
- font-size
- line-height
- font-family
- color
- text-transform
- letter-spacing
- word-spacing