資訊專欄INFORMATION COLUMN
摘要：特殊性我們可以用很多種寫法來定位一個元素，而選擇器的特殊性值則是決定哪一個勝出的關鍵。選擇器的特殊性值其實很簡單，就是的形式。按照特殊性對應用到給定元素的所有聲明排序。有較高特殊性的元素權重要大于有較低的特殊性的元素。
之前學CSS一直沒有深入的去研究CSS選擇器的優先級，這次好好的看了下之后寫的時候特殊性值仿佛都浮現在眼前，現在寫的時候心里更加清晰，這里梳理一下學到的東西。
特殊性(specificity)我們可以用很多種寫法來定位一個元素，而選擇器的特殊性值則是決定哪一個勝出的關鍵。選擇器的特殊性值其實很簡單，就是 0,0,0,1/0,1,0,1/0,0,0,5/... 的形式。
主要有四個規則:
用了ID +0,1,0,0
用class、屬性(如[id="btn1"])、偽類(如:hover) +0,0,1,0
元素和偽元素(如::before) 加0,0,0,1
結合符對特殊性沒有貢獻,而通配符的貢獻是0,0,0,0.(所以他們對總特殊性沒有影響)
那么最前面的0呢?其實這個是留給內聯樣式的的~所以內聯樣式的特殊性最高,是1,0,0,0.
接下來我們再看幾個例子相信能更好地理解:
p{font-style: normal} /* 0,0,0,1 */
body div p{font-style:italic} /* 0,0,0,3 */(winner)
html > body table tr[id="totals"] td ul > li{color:maroon;} /* 0,0,1,7 */
li#answer {color: navy} /* 0,1,0,1 /* (winner)
我們注意到第二組盡管第一個的特殊性值的最后一part已經達到了7，但是還是輸給了0,1,0,1.特殊性值并不是簡單的進制相加和比較,而是從左向右排序的,,只要前面比你大,不管后面你是7還是77,都比你特殊性高。如1,0,0,0大于0,10,0,0.
這是從網上找到的一張圖~很有意思.
最后一點則是重要聲明:
p.dark{color: #333 !important;}
重要聲明并沒有貢獻特殊性值,但是重要聲明總是會覆蓋非重要聲明,所以我們可以把重要聲明和非重要生命分為兩組，非重要聲明使用特殊性值來解決沖突，重要聲明的沖突會在重要聲明內部解決.
繼承繼承很簡單,后代元素樣式會繼承父元素的樣式.
但是顯然邊框，盒子模型的外邊距、內邊距等等都是不能繼承的。
繼承的值不貢獻特殊性,我們要注意這和0,0,0,0特殊性是有區別的.
0,0,0,0特殊性會優先于無特殊性.
*{color: gray}
h1{color: black}
css specificity
em中的字體顏色會是灰色的,因為0特殊性比繼承值優先級高.
層疊CSS其實不就叫層疊樣式表嘛(cascading style sheet),所以層疊是CSS最核心的概念,而層疊其實就是結合我們前面所說的特殊性和繼承做到的.
CSS的層疊規則如下:
找出所有相關的規則,這些規則都包含與一個給定元素匹配的選擇器。
按顯式權重對應用到該元素的所有聲明排序2）按照顯式權重對應用到該元素的所有聲明排序。標志！important的規則的權重要高于沒有！important標志的規則。按照來源對應用到給定元素的所有聲明排序。共有3種來源，創作人員，讀者和用戶代理。正常情況下，創作人員 > 讀者模式 > 用戶代理的默認樣式。
按照特殊性對應用到給定元素的所有聲明排序。有較高特殊性的元素權重要大于有較低的特殊性的元素。
按照出現的順序應用到給定元素的所有聲明排序。一個聲明在樣式表或文檔中越后出現，它的權重就越大。如果樣式表中右導入的樣式表，一般認為出現在導入樣式表中的聲明在前，主樣式表中的所有聲明在后。
css權威指南balabala了這一大段,還是簡單點來描述吧.
首先我們確定來源
讀者的重要聲明>創作人員的重要聲明>創作人員的正常聲明>讀者的正常聲明>用戶代理聲明.
(讀者的聲明就是用戶自定義的樣式,比如在設置中改變字體大小.)
然后再按特殊性排序,特殊性值高的優先級高.
如果特殊性值還是一樣,那么后定義的規則優先.
總結在實際開發過程中,我們可能只需要知道內聯樣式>id>class即可,如果特殊性相同,后定義的規則優先.
參考書籍: 《CSS: The Definitive Guide》
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111440.html
摘要：相對于其最近的一個定位設置的父對象進行絕對定位，可用。代碼基本語法默認值，無特殊定位。代碼相對定位相對定位生成相對定位的元素，相對于其它位置進行定位。結語結語帶你走進定位詳解，多試試，熟能生巧嘛 學習CSS相關知識，定位是其中的重點，也是難點之一，如果不了解css定位有時候都不知道怎么用，下面整理了一下關于定位屬性的具體理解和應用方案。 一：定位 定位屬性列表 position top...
摘要：之前寫了一篇詳解屬性的博文，當時自己沒分清楚偽元素和偽類，所以在文章內把概念混淆了，慶幸兄指正了我的錯誤，所以今天打算好好研究下兩者的區別。偽元素用于將特殊的效果添加到某些選擇器。偽類種類偽元素種類區別這里用偽類和偽元素來進行比較。 之前寫了一篇 《詳解 CSS 屬性 - :before && :after》 的博文，當時自己沒分清楚偽元素和偽類，所以在文章內把概念混淆了，慶幸 @ri...
摘要：之前寫了一篇詳解屬性的博文，當時自己沒分清楚偽元素和偽類，所以在文章內把概念混淆了，慶幸兄指正了我的錯誤，所以今天打算好好研究下兩者的區別。偽元素用于將特殊的效果添加到某些選擇器。偽類種類偽元素種類區別這里用偽類和偽元素來進行比較。 之前寫了一篇 《詳解 CSS 屬性 - :before && :after》 的博文，當時自己沒分清楚偽元素和偽類，所以在文章內把概念混淆了，慶幸 @ri...
摘要：當你將一個樣式添加到元素上卻發現不起作用時，那就是遇到優先級問題了。那么應該如何處理優先級問題呢，下面我總結了一些解決優先級問題的常用法則。如內部樣式外部樣式內聯樣式此時顯示的優先級是。 當你將一個樣式添加到元素上卻發現不起作用時，那就是遇到優先級問題了。那么應該如何處理 CSS 優先級問題呢，下面我總結了一些解決 CSS 優先級問題的常用法則。 樣式距離 我們可以通過使用外部樣式...
閱讀 1295·2021-11-23 09:51
閱讀 3399·2021-09-06 15:00
閱讀 987·2021-08-16 10:57
閱讀 1370·2019-08-30 12:46
閱讀 933·2019-08-29 12:22
閱讀 1603·2019-08-29 11:07
閱讀 3146·2019-08-26 11:23
閱讀 2979·2019-08-23 15:14
