標籤：style blog color strong 代碼 div amp log
CSS的特殊性是非常重要卻又經常被忽視的屬性,特別是在團隊合作下的產品反覆式開發法中,因為不注重CSS的特殊性最後導致某些代碼混亂不堪,這裡就把自己對CSS特殊性的認識做一些歸納總結.
CSS的特殊性(specificity)也可以稱為CSS的優先順序或權值:對於每個樣式表規則,瀏覽器都會計算選取器的特殊性,從而使元素屬性聲明在有衝突的情況下能夠正確顯示.
特殊性的描述可以把它看成一個4位元: 0.0.0.0 ,數值越大的特殊性越高(例如:0.1.0.0>0.0.1.2),也是最終瀏覽器顯示的效果.
特殊性的具體特性:簡單的說就是:內聯樣式的特殊性>ID選取器>類或者偽類>元素和虛擬元素.
看幾個例子:
<div style="backgroud:red">... /* 1.0.0.0 */#iin1{ backgroud:blue;} /* 0.1.0.0 */.iin2{ backgroud:green;} /* 0.0.1.0 */
如果這樣寫<div id=”iin1″ class=”iin2″ style=”backgroud:red”>…因為這幾個樣式定義存在衝突,所以顯示效果需要根據特殊性來判斷,從例子中可以很明顯的看出& lt;div style=”backgroud:red”>…/* 1.0.0.0 */最大,所以<div>的背景色最終為紅色;繼續:
a{ color:red;} /* 0.0.0.1 */p a{ color:blue;} /* 0.0.0.2 */p a.more{ color:green;} /* 0.0.1.2 */
根據特殊性規則:
<a href="#"></a> <a>為紅色;<p><a href="#"></a></p> <a>為藍色;<p><a href="#" class="more"></a></p> <a>為綠色;
串連符和萬用字元不具有特殊性
即特殊性為0.0.0.0; 例如下面兩組例子,它們的的特殊性相同:
div p{ color:red;} /* 0.0.0.2 */body * p{ color:blue} /* 0.0.0.2*/ol>li{ color:red;} /* 0.0.0.2 */ol li{ color:blue;} /* 0.0.0.2 */
那麼遇到上面的情況瀏覽器該如何渲染呢? 瀏覽器會根據選取器出現的先後順序來判斷,後出現的選取器會把先出現的給覆蓋掉,所以最後兩組例子都會顯示為藍色.而且瀏覽器會將內部樣式 (即<style>…</style>中的樣式)的順序判斷為在外鏈樣式之後,也就是說內部樣式會覆蓋掉外鏈樣式中相同的屬性定 義.
繼承同樣不具有特殊性例:
p{ color:blue;} /* 0.0.0.1 */*{ color:red;} /* 0.0.0.0 */
雖然萬用字元*定義在p的後面,但最終<p>中的文字還是會顯示為藍色;值得注意的是繼承的”不具有特殊性”不同於上面提到的串連符和萬用字元,它是連0都沒有! 這又會給我們帶來什麼意外呢?看看下面的例子:
...<style>*{ color:red;}</style><body><p>這裡的文字<em>hello</em></p></body>...
例子很好理解,因為萬用字元定義了所有元素,所以<p>和<em>都是的紅色(這裡p,em特殊性為0.0.0.0).然後我們對例子做一點修改:
...<style>*{ color:red;}.blue{ color:blue;}</style><body><p class="blue">這裡的文字<em>hello</em></p></body>...
這裡給<p>加了個blue的類,我們期望的是<p>裡面的文字都變為藍色,同時也想當然的認為<em>會繼承<p>的blue類的藍色,但事實卻是:
<em>標籤裡的文字顏色是red。出現這種意外的原因就在於繼承的特殊性連0都沒有,而萬用字元的特殊性為0,所以萬用字元的樣式被顯示出來…
最後一個影響特殊性的聲明:!important例:
h1{ color:red!important;}
!important被稱為重要聲明,被標記為!important的屬性其特殊性最高,當出現有衝突的重要聲明時,同樣安照出現的先後順序決定最後的顯示.
例:
h1{color:red!important;}h1{color:blue!important;}
最後h1文字為藍色
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
