css的三大特性：層疊，繼承、優(yōu)先級以及權(quán)重的計算

三大特性：層疊性、繼承性、優(yōu)先級

創(chuàng)新互聯(lián)建站主打移動網(wǎng)站、成都網(wǎng)站設(shè)計、網(wǎng)站制作、網(wǎng)站改版、網(wǎng)絡(luò)推廣、網(wǎng)站維護、域名與空間、等互聯(lián)網(wǎng)信息服務(wù)，為各行業(yè)提供服務(wù)。在技術(shù)實力的保障下，我們?yōu)榭蛻舫兄Z穩(wěn)定，放心的服務(wù)，根據(jù)網(wǎng)站的內(nèi)容與功能再決定采用什么樣的設(shè)計。最后，要實現(xiàn)符合網(wǎng)站需求的內(nèi)容、功能與設(shè)計，我們還會規(guī)劃穩(wěn)定安全的技術(shù)方案做保障。

相同選擇器給設(shè)置相同的樣式，此時一個樣式就會覆蓋（層疊）另一個沖突的樣式。層疊性主要解決樣式?jīng)_突問題。

在這里會顯示的顏色為pink，字體大小為20px。

子標(biāo)簽會繼承父標(biāo)簽的某些樣式

在這里p標(biāo)簽會顯示紅字，20px。

行高的繼承

當(dāng)同一個元素指定多個選擇器，就會有優(yōu)先級的產(chǎn)生

p為白色因為繼承權(quán)重為0，無論父類是什么權(quán)重都不繼承。

所以如果要給a設(shè)置樣式就要單獨設(shè)置一個a的樣式。

這里顯示的為藍色，因為權(quán)重大。

最終大豬蹄子的顏色為紅色，大肘子和豬尾巴為藍色。

css選擇器層疊、優(yōu)先級、樣式?jīng)_突

上面是一個簡單的html案例，對于同一個元素應(yīng)用多個規(guī)則時，規(guī)則中可能包含沖突的聲明，在style樣式表中包含了三個規(guī)則集，每一個規(guī)則給它指定了不同的字體顏色。標(biāo)題不可能同時擁有三種顏色，所以最終的效果是顯示的紅色(red)。

瀏覽器如何知道并解決聲明沖突，這其中層疊指的就是這一系列規(guī)則。它決定了如何解決沖突，是css語言的基礎(chǔ)。層疊會依據(jù)三種條件解決沖突。

疊層的規(guī)則是按照這種順序來考慮的，看下圖

這些規(guī)則讓瀏覽器可以以預(yù)測的方式解決css樣式規(guī)則中的沖突。

你添加到網(wǎng)頁里的樣式表并不是瀏覽器唯一使用的樣式表，還有其他類型或來源的樣式表。你的樣式表屬于作者樣式表，除此之外還有用戶代理樣式表，即瀏覽器默認(rèn)的樣式。用戶代理樣式表優(yōu)先級低，你的樣式會覆蓋它們。

用戶代理樣式表在不同瀏覽器上稍有差異，但是大體上是在做相同的事情：為標(biāo)題 h1 到 h6 和段落 p 添加上下邊距，為列表 ol,ul 添加左側(cè)內(nèi)邊距，為鏈接添加顏色，為元素添加各種默認(rèn)字號。

瀏覽器應(yīng)用了用戶代理樣式表后才會應(yīng)用你的樣式表，即作者樣式表，你指定的聲明會覆蓋用戶代理樣式表里面的樣式，如果在html里鏈接了多個樣式表，那么它們的來源都相同，即屬于作者樣式表。

用戶代理樣式表因為設(shè)置了用戶需要的樣式，所以不會做出一些超出預(yù)期的事情，當(dāng)不喜歡默認(rèn)樣式的時候，可以在自己的樣式表里面設(shè)置別的樣式來覆蓋用戶代理樣式即可。

作為一個標(biāo)準(zhǔn)的前端打工仔，必定熟悉覆蓋代理樣式。這種做法實際上就是利用了層疊的樣式來源規(guī)則。你寫的樣式會覆蓋用戶代理樣式，因為來源不同。

樣式來源規(guī)則有一個例外，標(biāo)記為重要 !important 的聲明。該聲明就會被標(biāo)記為重要的聲明。

標(biāo)記了 !important 的聲明會被當(dāng)做更高優(yōu)先級的來源，因此總體的優(yōu)先級按照由高到低排列，如下所示：

如果無法用來源解決沖突聲明，瀏覽器會嘗試檢查它們的優(yōu)先級。理解優(yōu)先級很重要，因為作者樣式幾乎都是屬于優(yōu)先級的范圍，日常工作接觸的大部分開發(fā)樣式是來自于同源，如果不理解優(yōu)先級，寫出來的css樣式會被坑的很慘。

瀏覽器將優(yōu)先級分為兩部分：HTML的行內(nèi)樣式和選擇器的樣式。

如果HTML的style屬性寫樣式，這個聲明只會作用域當(dāng)前元素。實際上行內(nèi)元素屬于“帶作用域”的聲明，它會覆蓋任何來自樣式表或style標(biāo)簽的樣式。行內(nèi)樣式?jīng)]有選擇器，因為它們直接作用于所在的元素。

上面就是一個行內(nèi)樣式，設(shè)置了顏色color為黃色yellow。

如果你希望在樣式表中覆蓋行內(nèi)樣式的聲明，需要在樣式表中對應(yīng)標(biāo)簽下的聲明后添加 !importanta ，這樣能夠?qū)⑺嵘揭粋€更高優(yōu)先級來源。但如果行內(nèi)樣式也被標(biāo)記為 !imortant 那就無法覆蓋它了。最好不要在行內(nèi)使用 !important ，而是只在樣式表中使用 !important 。

優(yōu)先級的第二部分是由選擇器優(yōu)先級決定。比如，有兩個類名的選擇器比只有一個類名的選擇器優(yōu)先級更高。具體可以看下面的案例。

通過比較選擇器類型來決定哪個選擇器優(yōu)先值最高。

上面的樣式表中最終顯示的color顏色值為紅色(red)。

一個常用的表示優(yōu)先級的方式是用數(shù)組形式來標(biāo)記，通常用都好隔開每個數(shù)。比如“1，2，3”表示用1個id、2個類、2個標(biāo)簽組成。優(yōu)先級最高的id列為第一位，緊接著是類，最后是標(biāo)簽。

我們可以通過下面的表格來查看各種選擇器和對應(yīng)的優(yōu)先級。

現(xiàn)在，通過比較數(shù)值就能快速明確決定哪個優(yōu)先級更高。所以上面的順序是"1,0,0""0,2,0""0,1,3""0,0,4"。而優(yōu)先級低的樣式表會被優(yōu)先級高的樣式表給覆蓋。

我們?nèi)粘ｉ_發(fā)不建議某個元素的樣式表寫過長的標(biāo)簽名和類名連體。一般只要能夠區(qū)分優(yōu)先級即可。

疊層的第三步，也是最后一步，是源碼順序。如果兩個聲明的來源和優(yōu)先級相同，其中一個聲明在樣式表中出現(xiàn)較晚，或者位于頁面較晚引入的樣式表中，則該聲明勝出。

在上面方法中，選擇器優(yōu)先級相同，都是(0,1,1)，最終瀏覽器呈現(xiàn)的顏色color是灰色gray。

CSS入門8-三大特性之層疊特性與優(yōu)先級

所謂的層疊性與優(yōu)先級，其實說白了可以理解為，不同的規(guī)則起沖突的情況下，聽誰的呢？有的時候這種沖突很容易解決，有的時候我們自己都難以決斷，比如好聲音三位導(dǎo)師都選你，該跟誰走呢。索性css給出了這些規(guī)則的優(yōu)先級，不需要我們?nèi)タ鄲馈?/p>

元素的樣式該如何去展現(xiàn)呢，首先看一下某個元素某個屬性可能作用樣式的情況：

下面我們來詳細分析一下這三種情況。

我們先來看有唯一指定樣式的情況，因為，這種情況最簡單，就一個選擇，也別挑了，說啥就是啥。我們還是來大致看看。

結(jié)論：若只有唯一指定樣式，以該樣式為準(zhǔn)。

多個樣式規(guī)則沖突，其實有很多種情況。還記得我們學(xué)過樣式引入方式有四種，涉及三種樣式，分別是內(nèi)聯(lián)，內(nèi)部和外部（參考 CSS入門4-引入CSS ）。首先我們來看只引入其中一種類型的情況下，出現(xiàn)沖突該如何解決。

僅有內(nèi)聯(lián)的情況下，要出現(xiàn)沖突，只可能是在style中多次對同一個屬性賦值。

看上圖，審查一下元素，可以看到該元素樣式中，前面的red被覆蓋了，color最后的取值是blue。最右邊文字的顏色確實也是藍色。

結(jié)論：只有內(nèi)聯(lián)樣式，后面的屬性賦值優(yōu)先級大于前面的屬性賦值。

內(nèi)部樣式，已經(jīng)可以選擇多種選擇器來指定樣式。所以，這里情況比內(nèi)聯(lián)會復(fù)雜很多。首先來復(fù)習(xí)一下選擇器的種類，可以參考 CSS入門5-選擇器 。這么多的選擇器類型和組合關(guān)系，可能都會產(chǎn)生沖突，這個時候怎么辦呢，想想都復(fù)雜，我們繼續(xù)拆分問題。將選擇器分為四類:

可以看到div中兩個類對顏色的定義沖突時，不管class定義的順序如何，以style中類的順序為準(zhǔn)，后面的覆蓋前面的樣式。如果是同一選擇器，也是后者覆蓋前者，這種情況可以涵蓋在同類選擇器的情況下。

結(jié)論：同類型選擇器（類型一樣，即同為元素選擇器，類選擇器，id選擇器或者屬性選擇器），按style中的先后順序，后者優(yōu)先級更高。

我們選擇正反兩種順序，來看不同選擇器之間的比較。首先，四種選擇器在一起時，id選擇器獲勝。然后排除id選擇器，剩余三種選擇器比較時，類和屬性誰在下邊誰贏，也就是后者覆蓋前者。最后，元素分別與類和屬性比較，發(fā)現(xiàn)元素都輸了。

結(jié)論：id (類和屬性) 元素，類和屬性同級，遵循同級元素后者覆蓋前者的規(guī)則。

注：查看某個元素樣式的時候，調(diào)試窗口是按照優(yōu)先級規(guī)則從小到大往上排的，越往上的規(guī)則優(yōu)先級越高，對同個屬性的樣式規(guī)定將會覆蓋下面低優(yōu)先級的樣式規(guī)定。

注：要想在調(diào)試器看到動態(tài)偽類效果，需要在styles中勾選該效果。

看上面示例，我們在style內(nèi)先按id，類，屬性，元素，靜態(tài)偽類(只應(yīng)用于超鏈接)，動態(tài)偽類(可應(yīng)用于任何元素)，目標(biāo)偽類:target(IE8-不支持，匹配錨點對應(yīng)的目標(biāo)元素)，UI元素偽類(IE8-不支持)，結(jié)構(gòu)偽類(IE8-不支持)的順序指定規(guī)則。結(jié)果發(fā)現(xiàn)其表現(xiàn)如下：

a：id 結(jié)構(gòu)偽類 動態(tài)偽類 靜態(tài)偽類 屬性 類 元素 瀏覽器默認(rèn)屬性 繼承屬性

input：id 結(jié)構(gòu)偽類 UI元素偽類 目標(biāo)偽類 動態(tài)偽類 類 元素 瀏覽器默認(rèn)屬性 繼承屬性

我們合并一下這兩個結(jié)論，有如下結(jié)論：

3.2.1.2.2.1-1 id 結(jié)構(gòu)偽類 UI元素偽類 目標(biāo)偽類 動態(tài)偽類 靜態(tài)偽類 屬性 類 元素 瀏覽器默認(rèn)屬性 繼承屬性

（當(dāng)然，需要注意的是，并不是每個元素都有這些屬性的）

然后，我們將style內(nèi)各規(guī)則倒序一下:

結(jié)果發(fā)現(xiàn)其表現(xiàn)如下：

a：id 類 屬性 靜態(tài)偽類 動態(tài)偽類 結(jié)構(gòu)偽類 元素 瀏覽器默認(rèn)屬性 繼承屬性

input：id 類 動態(tài)偽類 目標(biāo)偽類 UI元素偽類 結(jié)構(gòu)偽類 元素 瀏覽器默認(rèn)屬性 繼承屬性

我們合并一下這兩個結(jié)論，有如下結(jié)論：

3.2.1.2.2.1-2 id 類 屬性 靜態(tài)偽類 動態(tài)偽類 目標(biāo)偽類 UI元素偽類 結(jié)構(gòu)偽類 元素 瀏覽器默認(rèn)屬性 繼承屬性

綜合3.2.1.2.2.1-1和3.2.1.2.2.1-2來看，我們再次驗證了類和屬性同級，并且發(fā)現(xiàn)它們和偽類也是同級的。有如下結(jié)論：

結(jié)論：id (類，屬性，偽類) 元素，類，屬性和偽類同級，遵循同級元素后者覆蓋前者的規(guī)則。

偽元素，說是元素，但又不是真實的元素，是一個虛擬的元素。如何詳細理解這段話呢，我們來看一下下面這個例子。

先按后代，子代，通用兄弟，相鄰兄弟在style中排序，發(fā)現(xiàn)后面的優(yōu)先級高。然后順序反過來：

由以上幾點結(jié)論可以得出， 親戚關(guān)系發(fā)生沖突時，先看id選擇器數(shù)量，誰多誰大，一樣多就看類（及其同級）選擇器，誰多誰大，若還是一樣多，則看元素選擇器，誰多誰大。如果仍然一樣多，誰在后面誰優(yōu)先。

可以看出， 通配選擇器樣式優(yōu)先級僅比瀏覽器默認(rèn)樣式和繼承樣式優(yōu)先級高一些 。

總結(jié)3.2.1.2 僅有內(nèi)部樣式的情況，有如下結(jié)論：

ps:對于社群關(guān)系，在比較優(yōu)先級時，將其理解為在該位置拆按順序成一個個單獨的個體即可。

這種情況的表現(xiàn)形式與內(nèi)部樣式一樣。

這種情況遵循后者覆蓋前者的原則，后面的link優(yōu)先于前面的link，而不管其加載的順序如何。

內(nèi)聯(lián) 內(nèi)部 外部

CSS的繼承性、層疊性、權(quán)重

css知多少（3）——樣式來源與層疊規(guī)則

深入理解CSS中的層疊上下文和層疊順序

本文題目：CSS樣式層疊優(yōu)先次序,css樣式優(yōu)先級高低排列
URL分享：http://jinyejixie.com/article46/dssejhg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、移動網(wǎng)站建設(shè)、商城網(wǎng)站、App開發(fā)、建站公司、App設(shè)計

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)