css樣式優(yōu)先級知識(shí)點(diǎn)的示例分析

發(fā)布時(shí)間：2021-10-14 14:18:44 來源：億速云閱讀：122 作者：小新欄目：移動(dòng)開發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)css樣式優(yōu)先級知識(shí)點(diǎn)的示例分析，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

一、“載”
這里的“載”，是載體，即樣式表。對于開發(fā)人員來說，經(jīng)常涉及到的只是“載”之一，除此之外，還有兩個(gè)。它們是什么呢？具體如下：
1、用戶端樣式表：這是瀏覽器默認(rèn)的樣式表，在遵守其規(guī)則的情況下，才有了div的原始屬性是“display:block”，span是“display:inline”。
2、用戶樣式表：即使用瀏覽器的人定義的樣式表。也許你不能理解，但是事實(shí)是你可以做到，具體設(shè)置方法，我以firefox為例，步驟如下：（1）菜單欄 “幫助”-->疑難排解信息-->應(yīng)用基礎(chǔ)-->打開所在文件夾-->chrome；（2）創(chuàng)建一個(gè)名為 userContent.css 的 CSS 文件，編輯加入所需要的樣式，保存。注意名字必須叫 userContent.css，不能更改。否則無效；（3）重啟firefox。我以w3cfuns首頁“熱門討論”為例，對其樣式進(jìn)行了設(shè)置，呈現(xiàn)的結(jié)果如下：
css樣式優(yōu)先級知識(shí)點(diǎn)的示例分析
而原本的效果如下：

通過上述方面，我們是可以來自動(dòng)地改變網(wǎng)站的呈現(xiàn)方式的。
3、作者樣式表：這個(gè)就是我們最熟悉的了，就是開發(fā)人員所書寫的樣式表。而我們經(jīng)常所說的樣式表，其實(shí)就停留在這個(gè)層面上，因?yàn)樗c我們最親密！

二、“位”
之所以把“位”放在第二點(diǎn)來說，有如下的考慮：（1）“位”指代兩點(diǎn)：樣式聲明的位置和樣式表鏈接的位置；（2）不管是樣式聲明的位置或者樣式表鏈接的位置，都是具體到對開發(fā)人員來說的，也就是“載”中的第3點(diǎn)，因此必須先說清“載”。

說清了理由，下面具體到“位”，就如理由中的第一點(diǎn)，我將從兩點(diǎn)展開：
1、樣式聲明的位置：樣式的聲明一搬來說有四種方式，除去@import和另外一種（幾乎沒用過，以至于忘了名稱了），目前常見的就兩種：行內(nèi)式和外聯(lián) 式，行內(nèi)用style標(biāo)簽，外聯(lián)用link標(biāo)簽。在這點(diǎn)上，排除style樣式的干擾（第四點(diǎn)會(huì)提到），樣式優(yōu)先級遵循后來居上的原則，也就是說，樣式表里后面聲明的樣式較之前面聲明的優(yōu)先級更高。比如：在style.css這個(gè)文件里，在第一行聲明了這樣的樣式：

代碼如下:

p{color:#f00;}

在第三行聲明了這樣的樣式：

代碼如下:

p{color:#000;}

那么，最終p的字體顏色為黑色。

2、樣式表鏈接的位置：同一條樣式可能聲明在兩個(gè)樣式表中，同一個(gè)html頁面可能同時(shí)調(diào)用這兩個(gè)樣式表，這時(shí)候樣式的優(yōu)先級依然可以用后來居上的原則，只不過這時(shí)候的后來居上對象不同而已。比如：在一個(gè)html頁面中，head代碼如下：

代碼如下:

這個(gè)時(shí)候，如果在firstStyle.css里聲明這樣的樣式：

代碼如下:

p{color:#f00;}

而在secondStyle.css里聲明了這樣的樣式：

代碼如下:

p{color:#000;}

那么，最終p的字體顏色為黑色。它取決于后面鏈接的樣式表。

三、“重要”
“important”是重要的意思，加了感嘆號之后就是重中之重了，因此，一般的樣式聲明對它來說就有如逍遙游中的鯤鵬，最終只能“望洋興嘆”了。但是從“載”中我們又將思考，如果在用戶樣式表中聲明了important樣式，并在作者樣式表中也聲明了important樣式，那么誰的優(yōu)先級高呢？
于是第二點(diǎn)中“位”的說明似乎又有了一定的局限性了。從“載”出發(fā)，結(jié)合important，優(yōu)先級比較又可以延伸出下面5點(diǎn)：
1、用戶端聲明的樣式
2、無!important的用戶樣式
3、無!important的作者樣式
4、加了!important的作者樣式
5、加了!important的用戶樣式
按順序，以升序排序。即第5點(diǎn)的樣式高于第4點(diǎn)，其他以此類推。對于開發(fā)人員來說，應(yīng)該說加了important是最高級別了，后來的樣式也無法替代它了，這也是為什么在樣式中應(yīng)盡可能地避免使用important的原因。因?yàn)橐坏┞暶髁薸mportant，樣式級別達(dá)到最高，css最核心的機(jī)制，即層疊，就失去了意義。這點(diǎn)還是有必要注意的。

四、“特殊”
在對“位”的描述中，我把style標(biāo)簽掠過了，直接進(jìn)入一個(gè)觀點(diǎn)，即后來居上的原則；并舉了p標(biāo)簽的例子。其實(shí)對于有經(jīng)驗(yàn)的前端人員來說，像我舉的例子是不成“體統(tǒng)”的，因?yàn)闆]多少人會(huì)閑的無聊在同一個(gè)樣式表聲明兩個(gè)p元素的樣式，用來后面替代前面的。而事實(shí)上，我也只是想說明那個(gè)原則而已。好吧，那就再舉一個(gè)例子，來闡述“特殊”這一點(diǎn)。先一段html代碼：

代碼如下:

<div id="firstDiv" class="firstDiv">
<div id="secondDiv" class="secondDiv">
<p id="pElem" class="pElem" >happy</p>
</div>
</div>

下面的樣式寫進(jìn)名為style.css的樣式表中：

代碼如下:

#firstDiv #secondDiv #pElem{color:red;}
#firstDiv #secondDiv .pElem{color:yellow;}
#firstDiv .pElem{color:blue;}
#firstDiv p{color:gray;}

對于你所看到的，會(huì)發(fā)現(xiàn)p的字體顏色為黑色；當(dāng)刪除style標(biāo)簽樣式，p的字體顏色為紅色；再刪除樣式表的第一行，為黃色，依此為藍(lán)色、灰色。
css的這種特性稱為“特殊性”對比，是有一套既成的對比方式的，可以用a,b,c,d四個(gè)字母帶代表他們的方位。a指擁有style標(biāo)簽，b指ID選擇器，c指類選擇器和偽類，d指元素選擇器和偽元素。
它們的比較方式是：當(dāng)a相同，比較b；a,b相同,比較c；a,b,c相同，比較d，都相同呢？“后來居上”了。

針對上面的例子來說明。因?yàn)閜中存在style，也就是a存在，所以優(yōu)先級最高，所以p的字體顏色為黑色。當(dāng)刪除了style，a不存在，于是考慮ID選擇器，第一條css聲明有3個(gè)ID，較之后面的都多，所以它就是最終的樣式；以此類推。

關(guān)于“css樣式優(yōu)先級知識(shí)點(diǎn)的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

css樣式優(yōu)先級知識(shí)點(diǎn)的示例分析

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽