建站
咨詢
售后
建站咨詢
新聞中心
css的三大特性：層疊，繼承、優(yōu)先級以及權(quán)重的計(jì)算
三大特性：層疊性、繼承性、優(yōu)先級
創(chuàng)新互聯(lián)建站主打移動(dòng)網(wǎng)站、成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、網(wǎng)站改版、網(wǎng)絡(luò)推廣、網(wǎng)站維護(hù)、域名與空間、等互聯(lián)網(wǎng)信息服務(wù)，為各行業(yè)提供服務(wù)。在技術(shù)實(shí)力的保障下，我們?yōu)榭蛻舫兄Z穩(wěn)定，放心的服務(wù)，根據(jù)網(wǎng)站的內(nèi)容與功能再?zèng)Q定采用什么樣的設(shè)計(jì)。最后，要實(shí)現(xiàn)符合網(wǎng)站需求的內(nèi)容、功能與設(shè)計(jì)，我們還會(huì)規(guī)劃穩(wěn)定安全的技術(shù)方案做保障。
相同選擇器給設(shè)置相同的樣式，此時(shí)一個(gè)樣式就會(huì)覆蓋（層疊）另一個(gè)沖突的樣式。層疊性主要解決樣式?jīng)_突問題。
在這里會(huì)顯示的顏色為pink，字體大小為20px。
子標(biāo)簽會(huì)繼承父標(biāo)簽的某些樣式
在這里p標(biāo)簽會(huì)顯示紅字，20px。
行高的繼承
當(dāng)同一個(gè)元素指定多個(gè)選擇器，就會(huì)有優(yōu)先級的產(chǎn)生
p為白色因?yàn)槔^承權(quán)重為0，無論父類是什么權(quán)重都不繼承。
所以如果要給a設(shè)置樣式就要單獨(dú)設(shè)置一個(gè)a的樣式。
這里顯示的為藍(lán)色，因?yàn)闄?quán)重大。
最終大豬蹄子的顏色為紅色，大肘子和豬尾巴為藍(lán)色。
css選擇器層疊、優(yōu)先級、樣式?jīng)_突
上面是一個(gè)簡單的html案例，對于同一個(gè)元素應(yīng)用多個(gè)規(guī)則時(shí)，規(guī)則中可能包含沖突的聲明，在style樣式表中包含了三個(gè)規(guī)則集，每一個(gè)規(guī)則給它指定了不同的字體顏色。標(biāo)題不可能同時(shí)擁有三種顏色，所以最終的效果是顯示的紅色(red)。
瀏覽器如何知道并解決聲明沖突，這其中層疊指的就是這一系列規(guī)則。它決定了如何解決沖突，是css語言的基礎(chǔ)。層疊會(huì)依據(jù)三種條件解決沖突。
疊層的規(guī)則是按照這種順序來考慮的，看下圖
這些規(guī)則讓瀏覽器可以以預(yù)測的方式解決css樣式規(guī)則中的沖突。
你添加到網(wǎng)頁里的樣式表并不是瀏覽器唯一使用的樣式表，還有其他類型或來源的樣式表。你的樣式表屬于作者樣式表，除此之外還有用戶代理樣式表，即瀏覽器默認(rèn)的樣式。用戶代理樣式表優(yōu)先級低，你的樣式會(huì)覆蓋它們。
用戶代理樣式表在不同瀏覽器上稍有差異，但是大體上是在做相同的事情：為標(biāo)題 h1 到 h6 和段落 p 添加上下邊距，為列表 ol,ul 添加左側(cè)內(nèi)邊距，為鏈接添加顏色，為元素添加各種默認(rèn)字號。
瀏覽器應(yīng)用了用戶代理樣式表后才會(huì)應(yīng)用你的樣式表，即作者樣式表，你指定的聲明會(huì)覆蓋用戶代理樣式表里面的樣式，如果在html里鏈接了多個(gè)樣式表，那么它們的來源都相同，即屬于作者樣式表。
用戶代理樣式表因?yàn)樵O(shè)置了用戶需要的樣式，所以不會(huì)做出一些超出預(yù)期的事情，當(dāng)不喜歡默認(rèn)樣式的時(shí)候，可以在自己的樣式表里面設(shè)置別的樣式來覆蓋用戶代理樣式即可。
作為一個(gè)標(biāo)準(zhǔn)的前端打工仔，必定熟悉覆蓋代理樣式。這種做法實(shí)際上就是利用了層疊的樣式來源規(guī)則。你寫的樣式會(huì)覆蓋用戶代理樣式，因?yàn)閬碓床煌?/p>
樣式來源規(guī)則有一個(gè)例外，標(biāo)記為重要 !important 的聲明。該聲明就會(huì)被標(biāo)記為重要的聲明。
標(biāo)記了 !important 的聲明會(huì)被當(dāng)做更高優(yōu)先級的來源，因此總體的優(yōu)先級按照由高到低排列，如下所示：
如果無法用來源解決沖突聲明，瀏覽器會(huì)嘗試檢查它們的優(yōu)先級。理解優(yōu)先級很重要，因?yàn)樽髡邩邮綆缀醵际菍儆趦?yōu)先級的范圍，日常工作接觸的大部分開發(fā)樣式是來自于同源，如果不理解優(yōu)先級，寫出來的css樣式會(huì)被坑的很慘。
瀏覽器將優(yōu)先級分為兩部分：HTML的行內(nèi)樣式和選擇器的樣式。
如果HTML的style屬性寫樣式，這個(gè)聲明只會(huì)作用域當(dāng)前元素。實(shí)際上行內(nèi)元素屬于“帶作用域”的聲明，它會(huì)覆蓋任何來自樣式表或style標(biāo)簽的樣式。行內(nèi)樣式?jīng)]有選擇器，因?yàn)樗鼈冎苯幼饔糜谒诘脑亍?/p>
上面就是一個(gè)行內(nèi)樣式，設(shè)置了顏色color為黃色yellow。
如果你希望在樣式表中覆蓋行內(nèi)樣式的聲明，需要在樣式表中對應(yīng)標(biāo)簽下的聲明后添加 !importanta ，這樣能夠?qū)⑺嵘揭粋€(gè)更高優(yōu)先級來源。但如果行內(nèi)樣式也被標(biāo)記為 !imortant 那就無法覆蓋它了。最好不要在行內(nèi)使用 !important ，而是只在樣式表中使用 !important 。
優(yōu)先級的第二部分是由選擇器優(yōu)先級決定。比如，有兩個(gè)類名的選擇器比只有一個(gè)類名的選擇器優(yōu)先級更高。具體可以看下面的案例。
通過比較選擇器類型來決定哪個(gè)選擇器優(yōu)先值最高。
上面的樣式表中最終顯示的color顏色值為紅色(red)。
一個(gè)常用的表示優(yōu)先級的方式是用數(shù)組形式來標(biāo)記，通常用都好隔開每個(gè)數(shù)。比如“1，2，3”表示用1個(gè)id、2個(gè)類、2個(gè)標(biāo)簽組成。優(yōu)先級最高的id列為第一位，緊接著是類，最后是標(biāo)簽。
我們可以通過下面的表格來查看各種選擇器和對應(yīng)的優(yōu)先級。
現(xiàn)在，通過比較數(shù)值就能快速明確決定哪個(gè)優(yōu)先級更高。所以上面的順序是"1,0,0""0,2,0""0,1,3""0,0,4"。而優(yōu)先級低的樣式表會(huì)被優(yōu)先級高的樣式表給覆蓋。
我們?nèi)粘ｉ_發(fā)不建議某個(gè)元素的樣式表寫過長的標(biāo)簽名和類名連體。一般只要能夠區(qū)分優(yōu)先級即可。
疊層的第三步，也是最后一步，是源碼順序。如果兩個(gè)聲明的來源和優(yōu)先級相同，其中一個(gè)聲明在樣式表中出現(xiàn)較晚，或者位于頁面較晚引入的樣式表中，則該聲明勝出。
在上面方法中，選擇器優(yōu)先級相同，都是(0,1,1)，最終瀏覽器呈現(xiàn)的顏色color是灰色gray。
CSS入門8-三大特性之層疊特性與優(yōu)先級
所謂的層疊性與優(yōu)先級，其實(shí)說白了可以理解為，不同的規(guī)則起沖突的情況下，聽誰的呢？有的時(shí)候這種沖突很容易解決，有的時(shí)候我們自己都難以決斷，比如好聲音三位導(dǎo)師都選你，該跟誰走呢。索性css給出了這些規(guī)則的優(yōu)先級，不需要我們?nèi)タ鄲馈?/p>
元素的樣式該如何去展現(xiàn)呢，首先看一下某個(gè)元素某個(gè)屬性可能作用樣式的情況：
下面我們來詳細(xì)分析一下這三種情況。
我們先來看有唯一指定樣式的情況，因?yàn)椋@種情況最簡單，就一個(gè)選擇，也別挑了，說啥就是啥。我們還是來大致看看。
結(jié)論：若只有唯一指定樣式，以該樣式為準(zhǔn)。
多個(gè)樣式規(guī)則沖突，其實(shí)有很多種情況。還記得我們學(xué)過樣式引入方式有四種，涉及三種樣式，分別是內(nèi)聯(lián)，內(nèi)部和外部（參考 CSS入門4-引入CSS ）。首先我們來看只引入其中一種類型的情況下，出現(xiàn)沖突該如何解決。
僅有內(nèi)聯(lián)的情況下，要出現(xiàn)沖突，只可能是在style中多次對同一個(gè)屬性賦值。
看上圖，審查一下元素，可以看到該元素樣式中，前面的red被覆蓋了，color最后的取值是blue。最右邊文字的顏色確實(shí)也是藍(lán)色。
結(jié)論：只有內(nèi)聯(lián)樣式，后面的屬性賦值優(yōu)先級大于前面的屬性賦值。
內(nèi)部樣式，已經(jīng)可以選擇多種選擇器來指定樣式。所以，這里情況比內(nèi)聯(lián)會(huì)復(fù)雜很多。首先來復(fù)習(xí)一下選擇器的種類，可以參考 CSS入門5-選擇器 。這么多的選擇器類型和組合關(guān)系，可能都會(huì)產(chǎn)生沖突，這個(gè)時(shí)候怎么辦呢，想想都復(fù)雜，我們繼續(xù)拆分問題。將選擇器分為四類:
可以看到div中兩個(gè)類對顏色的定義沖突時(shí)，不管class定義的順序如何，以style中類的順序?yàn)闇?zhǔn)，后面的覆蓋前面的樣式。如果是同一選擇器，也是后者覆蓋前者，這種情況可以涵蓋在同類選擇器的情況下。
結(jié)論：同類型選擇器（類型一樣，即同為元素選擇器，類選擇器，id選擇器或者屬性選擇器），按style中的先后順序，后者優(yōu)先級更高。
我們選擇正反兩種順序，來看不同選擇器之間的比較。首先，四種選擇器在一起時(shí)，id選擇器獲勝。然后排除id選擇器，剩余三種選擇器比較時(shí)，類和屬性誰在下邊誰贏，也就是后者覆蓋前者。最后，元素分別與類和屬性比較，發(fā)現(xiàn)元素都輸了。
結(jié)論：id (類和屬性) 元素，類和屬性同級，遵循同級元素后者覆蓋前者的規(guī)則。
注：查看某個(gè)元素樣式的時(shí)候，調(diào)試窗口是按照優(yōu)先級規(guī)則從小到大往上排的，越往上的規(guī)則優(yōu)先級越高，對同個(gè)屬性的樣式規(guī)定將會(huì)覆蓋下面低優(yōu)先級的樣式規(guī)定。
注：要想在調(diào)試器看到動(dòng)態(tài)偽類效果，需要在styles中勾選該效果。
看上面示例，我們在style內(nèi)先按id，類，屬性，元素，靜態(tài)偽類(只應(yīng)用于超鏈接)，動(dòng)態(tài)偽類(可應(yīng)用于任何元素)，目標(biāo)偽類:target(IE8-不支持，匹配錨點(diǎn)對應(yīng)的目標(biāo)元素)，UI元素偽類(IE8-不支持)，結(jié)構(gòu)偽類(IE8-不支持)的順序指定規(guī)則。結(jié)果發(fā)現(xiàn)其表現(xiàn)如下：
a：id 結(jié)構(gòu)偽類 動(dòng)態(tài)偽類 靜態(tài)偽類 屬性 類 元素 瀏覽器默認(rèn)屬性 繼承屬性
input：id 結(jié)構(gòu)偽類 UI元素偽類 目標(biāo)偽類 動(dòng)態(tài)偽類 類 元素 瀏覽器默認(rèn)屬性 繼承屬性
我們合并一下這兩個(gè)結(jié)論，有如下結(jié)論：
3.2.1.2.2.1-1 id 結(jié)構(gòu)偽類 UI元素偽類 目標(biāo)偽類 動(dòng)態(tài)偽類 靜態(tài)偽類 屬性 類 元素 瀏覽器默認(rèn)屬性 繼承屬性
（當(dāng)然，需要注意的是，并不是每個(gè)元素都有這些屬性的）
然后，我們將style內(nèi)各規(guī)則倒序一下:
結(jié)果發(fā)現(xiàn)其表現(xiàn)如下：
a：id 類 屬性 靜態(tài)偽類 動(dòng)態(tài)偽類 結(jié)構(gòu)偽類 元素 瀏覽器默認(rèn)屬性 繼承屬性
input：id 類 動(dòng)態(tài)偽類 目標(biāo)偽類 UI元素偽類 結(jié)構(gòu)偽類 元素 瀏覽器默認(rèn)屬性 繼承屬性
我們合并一下這兩個(gè)結(jié)論，有如下結(jié)論：
3.2.1.2.2.1-2 id 類 屬性 靜態(tài)偽類 動(dòng)態(tài)偽類 目標(biāo)偽類 UI元素偽類 結(jié)構(gòu)偽類 元素 瀏覽器默認(rèn)屬性 繼承屬性
綜合3.2.1.2.2.1-1和3.2.1.2.2.1-2來看，我們再次驗(yàn)證了類和屬性同級，并且發(fā)現(xiàn)它們和偽類也是同級的。有如下結(jié)論：
結(jié)論：id (類，屬性，偽類) 元素，類，屬性和偽類同級，遵循同級元素后者覆蓋前者的規(guī)則。
偽元素，說是元素，但又不是真實(shí)的元素，是一個(gè)虛擬的元素。如何詳細(xì)理解這段話呢，我們來看一下下面這個(gè)例子。
先按后代，子代，通用兄弟，相鄰兄弟在style中排序，發(fā)現(xiàn)后面的優(yōu)先級高。然后順序反過來：
由以上幾點(diǎn)結(jié)論可以得出， 親戚關(guān)系發(fā)生沖突時(shí)，先看id選擇器數(shù)量，誰多誰大，一樣多就看類（及其同級）選擇器，誰多誰大，若還是一樣多，則看元素選擇器，誰多誰大。如果仍然一樣多，誰在后面誰優(yōu)先。
可以看出， 通配選擇器樣式優(yōu)先級僅比瀏覽器默認(rèn)樣式和繼承樣式優(yōu)先級高一些 。
總結(jié)3.2.1.2 僅有內(nèi)部樣式的情況，有如下結(jié)論：
ps:對于社群關(guān)系，在比較優(yōu)先級時(shí)，將其理解為在該位置拆按順序成一個(gè)個(gè)單獨(dú)的個(gè)體即可。
這種情況的表現(xiàn)形式與內(nèi)部樣式一樣。
這種情況遵循后者覆蓋前者的原則，后面的link優(yōu)先于前面的link，而不管其加載的順序如何。
內(nèi)聯(lián) 內(nèi)部 外部
CSS的繼承性、層疊性、權(quán)重
css知多少（3）——樣式來源與層疊規(guī)則
深入理解CSS中的層疊上下文和層疊順序
標(biāo)題名稱：CSS樣式層疊優(yōu)先次序,css樣式優(yōu)先級高低排列
分享路徑：http://www.dlmjj.cn/article/dssejhg.html
