所謂CSS優(yōu)先級(jí)，即是指CSS樣式在瀏覽器中被解析的先后順序。

內(nèi)聯(lián)樣式(inline style) > ID選擇符 > 類選擇符(class), 偽類(pseudo-class)和屬*(attribute)選擇符 > 類別(type)，偽對(duì)象(pseudo-element)

一,解釋:

*內(nèi)聯(lián)樣式(inline style):元素的style屬*，比如

*ID選擇符:元素的id屬*，比如

*類選擇符:比如

*偽類(pseudo-class):最常見的是錨(a)偽類，比如a:link,a:visited.

*屬性選擇符(attribute selectors):比如div[class=demo],含有class為demo的div元素

*類別選擇器(type selector):HTML標(biāo)簽選擇，比如div .demo,div元素下含有class為demo的元素

*偽對(duì)象選擇器(pseudo-element selector):比如div:first-letter,div元素下的第一個(gè)單詞。

多重CSS樣式定義，屬性追加重復(fù)最后優(yōu)先原則

一個(gè)標(biāo)簽可以同時(shí)定義多個(gè)class，也可以是同一個(gè)class中重復(fù)定義屬性。例如:

我們先定義兩個(gè)樣式

.one{width:200px;background:url(images/imgA.jpg) no-repeat left top;}

.two{border:10px solid #000; background:url(images/imgB.jpg) no-repeat left top;}

在頁面代碼中，我們可以這樣調(diào)用:

這樣最終的顯示效果是這個(gè)div樣式是什么呢??重復(fù)的是以哪一個(gè)為準(zhǔn)呢??

width:200px;

border:10px solid #000;

background:url(images/imgB.jpg) no-repeat left top;

因?yàn)?#xff0c;當(dāng)應(yīng)用兩個(gè)或多個(gè)樣式時(shí)，瀏覽器所應(yīng)用的樣式根據(jù)是屬性追加重復(fù)最后優(yōu)先原則

就是說兩個(gè)或多個(gè)或重復(fù)的樣式名定義，瀏覽器所應(yīng)用的樣式是按先后順序的，如果定義了重復(fù)的屬性值，以最后定義的為準(zhǔn)，如果應(yīng)用了兩個(gè)或多個(gè)樣式名，里面不重復(fù)定義的

屬性值就追加上去，重復(fù)的屬性值就以最后一個(gè)為準(zhǔn)。這里要注意的是，樣式的先后不是根據(jù)頁面上應(yīng)用的名字順序，而是樣式表里的樣式順序。

二、CSS的調(diào)用

頁面內(nèi)嵌法:就是將樣式表直接寫在頁面代碼的head區(qū)。類似這樣:

外部調(diào)用法:將樣式表寫在一個(gè)獨(dú)立的.css文件中，然后在頁面head區(qū)用類似以下代碼調(diào)用。

"@import"命令方法:類以下代碼,

本人推薦使用第二種調(diào)用方法(外部調(diào)用法)

優(yōu)先規(guī)則

既然樣式有優(yōu)先級(jí)，那么就會(huì)有一個(gè)規(guī)則來約定這個(gè)優(yōu)先級(jí)，而這個(gè)"規(guī)則"就是本次所需要講的重點(diǎn)。

樣式表中的特殊性描述了不同規(guī)則的相對(duì)權(quán)重，它的基本規(guī)則是:

1、統(tǒng)計(jì)選擇符中的ID屬性個(gè)數(shù)。

2、統(tǒng)計(jì)選擇符中的CLASS屬性個(gè)數(shù)。

3、統(tǒng)計(jì)選擇符中的HTML標(biāo)記名個(gè)數(shù)。

最后，按正確的順序?qū)懗鋈齻€(gè)數(shù)字，不要加空格或逗號(hào)，得到一個(gè)三位數(shù)(css2.1是用4位數(shù)表示)。( 注意，你需要把數(shù)字轉(zhuǎn)換成一個(gè)以三個(gè)數(shù)字結(jié)尾的更大的數(shù))。相應(yīng)于選擇符的最終數(shù)字列表可以很容易確定較高數(shù)字特性凌駕于較低數(shù)字的。

例如:

1、每個(gè)ID選擇符(#someid)，加 0,1,0,0。

2、每個(gè)class選擇符(.someclass)、每個(gè)屬性選擇符(形如[attr=value]等)、每個(gè)偽類(形如:hover等)加0,0,1,0。

3、每個(gè)元素或偽元素(:firstchild)等，加0,0,0,1。

4、其它選擇符包括全局選擇符*，加0,0,0,0。相當(dāng)于沒加，不過這也是一種specificity，后面會(huì)解釋。

總結(jié)

以上是生活随笔為你收集整理的css html5360百科,div+css的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。