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