css的特殊性是非常重要卻又經常被忽視的屬性,特別是在團隊合作下的產品迭代開發中,因為不注重css的特殊性最後導致某些**混亂不堪,這裡就把自己對css特殊性的認識做一些歸納總結.
css的特殊性(specificity)也可以稱為css的優先順序或權值:對於每個樣式表規則,瀏覽器都會計算選擇器的特殊性,從而使元素屬性宣告在有衝突的情況下能夠正確顯示.
特殊性的描述可以把它看成乙個4位數: 0.0.0.0 ,數值越大的特殊性越高(例如:0.1.0.0>0.0.1.2),也是最終瀏覽器顯示的效果.
簡單的說就是:內聯樣式的特殊性》id選擇器》類或者偽類》元素和偽元素.
看幾個例子:
... /* 1.0.0.0 */如果這樣寫…因為這幾個樣式定義存在衝突,所以顯示效果需要根據特殊性來判斷,從例子中可以很明顯的看出…/* 1.0.0.0 */最大,所以的背景色最終為紅色;繼續:#iin1 /* 0.1.0.0 */
.iin2 /* 0.0.1.0 */
a /* 0.0.0.1 */根據特殊性規則:p a /* 0.0.0.2 */
p a.more /* 0.0.1.2 */
即特殊性為0.0.0.0; 例如下面兩組例子,它們的的特殊性相同:為紅色;
為藍色;
為綠色;
div p /* 0.0.0.2 */body * p /* 0.0.0.2*/
ol>li /* 0.0.0.2 */那麼遇到上面的情況瀏覽器該如何渲染呢? 瀏覽器會根據選擇器出現的先後順序來判斷,後出現的選擇器會把先出現的給覆蓋掉,所以最後兩組例子都會顯示為藍色.而且瀏覽器會將內部樣式(即中的樣式)的順序判斷為在外鏈樣式之後,也就是說內部樣式會覆蓋掉外鏈樣式中相同的屬性定義.ol li /* 0.0.0.2 */
例:
p /* 0.0.0.1 */雖然萬用字元*定義在p的後面,但最終中的文字還是會顯示為藍色;值得注意的是繼承的」不具有特殊性」不同於上面提到的連線符和萬用字元,它是連0都沒有! 這又會給我們帶來什麼意外呢?看看下面的例子:* /* 0.0.0.0 */
...這裡的文字hello例子很好理解,因為萬用字元定義了所有元素,所以和都是的紅色(這裡p,em特殊性為0.0.0.0).然後我們對例子做一點修改:...
...class="blue">這裡的文字hello這裡給加了個blue的類,我們期望的是裡面的文字都變為藍色,同時也想當然的認為會繼承的blue類的藍色,但事實卻是:...
這裡的文字hello
出現這種意外的原因就在於繼承的特殊性連0都沒有,而萬用字元的特殊性為0,所以萬用字元的樣式被顯示出來…
例:
h1!important被稱為重要宣告,被標記為!important的屬性其特殊性最高,當出現有衝突的重要宣告時,同樣安照出現的先後順序決定最後的顯示.
例:
h1最後h1文字為藍色h1
CSS的特殊性 specificity
css的特殊性是非常重要卻又經常被忽視的屬性,特別是在團隊合作下的產品迭代開發中,因為不注重css的特殊性最後導致某些 混亂不堪,這裡就把自己對css特殊性的認識做一些歸納總結.css的特殊性 specificity 也可以稱為css的優先順序或權值 對於每個樣式表規則,瀏覽器都會計算選擇器的特殊性...
css繼承 層疊 特殊性
1 什麼是繼承？允許樣式不僅應用於某個特定html標籤元素，而且應用於其後代。例如 p 三年級時，我還是乙個膽小如鼠的小女孩。結果為 三年級時，我還是乙個膽小如鼠的小女孩。2 並非所有的css樣式都具有繼承性？例如 border 1px solid red p 三年級時，我還是乙個膽小如鼠的小女孩。...
css選擇器 特殊性
首先理解為什麼要有特殊性，元素在選擇的時候有多種選擇方法，會出現同乙個元素被多個規則選中，所以怎麼知道元素對應的哪個規則就使用到了特殊性，也就是選擇器的優先順序。特殊性值表述有四個部分 如 0100 0001，0100比0001要大所以優先順序高。那我們來看每個選擇器對應的值 h1 0 0 0 1 ...