国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看

css優(yōu)先級(jí)的四大原則：

原則一： 繼承不如指定

如果某樣式是繼承來的永遠(yuǎn)不如具體指定的優(yōu)先級(jí)高。

例子1：

CODE:

<style type="text/css">

<!--

*{font-size:20px}

.class3{ font-size: 12px; }

-->

</style>

<span class="class3">我是多大字號(hào)？</span>

運(yùn)行結(jié)果：.class3{ font-size: 12px; }

例子2：

CODE:

<style type="text/css">

<!--

#id1 #id2{font-size:20px}

.class3{font-size:12px}

-->

</style>

<div id="id1" class="class1">

<p id="id2" class="class2"> <span id="id3" class="class3">我是多大字號(hào)？</span> </p>

</div>

運(yùn)行結(jié)果：.class3{ font-size: 12px; }

注意：后面的幾大原則都是建立在“指定”的基礎(chǔ)上的。

原則二： #ID >.class >標(biāo)簽選擇符

例子：

CODE:

<style type="text/css">

<!--

#id3 { font-size: 25px; }

.class3{ font-size: 18px; }

span{font-size:12px}

-->

</style>

<span id="id3" class="class3">我是多大字號(hào)？</span>

運(yùn)行結(jié)果：#id3 { font-size: 25px; }

原則三：越具體越強(qiáng)大。

解釋：當(dāng)對(duì)某個(gè)元素的CSS選擇符樣式定義的越具體，層級(jí)越明確，該定義的優(yōu)先級(jí)就越高。

CODE:

<style type="text/css">

<!--

.class1 .class2 .class3{font-size: 25px;}

.class2 .class3{font-size:18px}

.class3 { font-size: 12px; }

-->

</style>

<div class="class1">

<p class="class2"> <span class="class3">我是多大字號(hào)？</span> </p>

</div>

運(yùn)行結(jié)果：.class1 .class2 .class3{font-size: 25px;}

原則四：標(biāo)簽#id >#id ; 標(biāo)簽.class >.class

上面這條原則大家應(yīng)該也都知道，看例子

CODE:

<style type="text/css">

<!--

span#id3{font-size:18px}

#id3{font-size:12px}

span.class3{font-size:18px}

.class3{font-size:12px}

-->

</style>

<span id="id3">我是多大字號(hào)？</span>

<span class="class3">我是多大字號(hào)？</span>

運(yùn)行結(jié)果：span#id3{font-size:18px} | span.class3{font-size:18px}

很多人會(huì)有這樣的疑問，為什么不把這個(gè)原則四歸入原則一形成：

【 標(biāo)簽#ID >#ID >標(biāo)簽.class >.class >標(biāo)簽選擇符 >通配符 】 呢？或者將 “標(biāo)簽.class” 看作多更為具體的 “.class” 從而歸入原則二呢？后面我將解答各位的疑惑，這就涉及到CSS的解析規(guī)律---------這四大原則間也是有優(yōu)先級(jí)的，是不是有些糊涂了？別急，繼續(xù) 看。

*四大原則的權(quán)重

相信很多人都知道上面的四大原則，不要以為知道了這四大原則就能分辨css中那條代碼是起作用的，不信？那你5秒內(nèi)能肯定的知道下面這段代碼，測(cè)試中的文字的字號(hào)嗎？

CODE:

<style type="text/css">

<!--

.class1 p#id2 .class3{font-size:25px}

div .class2 span#id3{font-size:18px}

#id1 .class3{font-size:14px}

.class1 #id2 .class3{font-size:12px}

#id1 #id2{font-size:10px}

-->

</style>

<div id="id1" class="class1">

<p id="id2" class="class2"> <span id="id3" class="class3">我是多大字號(hào)？</span> </p>

</div>

為了大家方便閱讀，我去掉了一些代碼。

四大原則的權(quán)重就是: 原則一 >原則二 >原則三 >原則四

解釋：

首先遵循原則一

有指定開始使用下面的原則，無指定則繼承離他最近的定義。

然后開始原則二

1、比較最高優(yōu)先級(jí)的選擇符

例子：

CODE:

<style type="text/css">

<!--

#id3{font-size:18px}

.class1 .class2 .class3{font-size:12px} /* 描述的再具體也不起作用 --- 原則二 */

.class3{font-size:18px}

div p span{font-size:12px}

-->

</style>

<div id="id1" class="class1">

<p id="id2" class="class2"> <span id="id3" class="class3">我是多大字號(hào)？</span> </p>

</div>

運(yùn)行結(jié)果：#id3{font-size:18px}

刪掉上面CSS中的前兩行可以得出，如果沒有最高級(jí)別的#ID會(huì)尋找.class 即使后面的CSS按照“原則二” 描述的再具體也無法突破原則一。

2、如果兩條CSS的如果最高選擇符優(yōu)先級(jí)一樣，則比較他們的數(shù)量

例子：

CODE:

<style type="text/css">

<!--

.class1 #id3{font-size:12px}

.class1 .class2 #id3{font-size:14px}

-->

</style>

<div id="id1" class="class1">

<p id="id2" class="class2"> <span id="id3" class="class3">我是多大字號(hào)？</span> </p>

</div>

運(yùn)行結(jié)果:.class1 .class2 #id3{font-size:14px}

3、如果最高選擇符級(jí)別和數(shù)量都一樣，則按照原則二比較他們下一級(jí)，以此類推。

例子1：

CODE:

<style type="text/css">

<!--

#id1 .class2 .class3{font-size:14px}

div .class2 #id3{font-size:12px}

-->

</style>

<div id="id1" class="class1">

<p id="id2" class="class2"> <span id="id3" class="class3">我是多大字號(hào)？</span> </p>

[color=Orange]

運(yùn)行結(jié)果:#id1 .class2 .class3{font-size:14px}

[/color]

*最高級(jí)選擇符的位置沒有高下之分，論證：[code]CODE:

<style type="text/css">

<!--

#id1 .class2 .class3{font-size:18px}

.class1 #id2 .class3{font-size:14px}

.class1 .class2 #id3{font-size:12px}

-->

</style>

<div id="id1" class="class1">

<p id="id2" class="class2"> <span id="id3" class="class3">我是多大字號(hào)？</span> </p>

</div>

上例中更換3條CSS的先后可以得出，哪條位于最后，哪條起作用。說明他們的級(jí)別一樣，后面的將覆蓋前面的。

*將原則四歸入原則二的不合理性，論證：

CODE:

<style type="text/css">

<!--

.class1 span#id3{font-size:14px}

#id1 .class2 .class3{font-size:12px}

-->

</style>

<div id="id1" class="class1">

<p id="id2" class="class2"> <span id="id3" class="class3">我是多大字號(hào)？</span> </p>

</div>

#id1 .class2 .class3{font-size:12px}

可以看到span#id3并不比#id1高出一個(gè)級(jí)別。

無結(jié)果開始原則三

如果比較結(jié)果，選擇符從最高級(jí)開始都對(duì)應(yīng)，級(jí)別上的數(shù)量也相同，則開始比較誰更具體。

例子：

CODE:

<style type="text/css">

<!--

#id1 .class2 span{font-size:14px}

.class1 #id3{font-size:12px}

-->

</style>

<div id="id1" class="class1">

<p id="id2" class="class2"> <span id="id3" class="class3">我是多大字號(hào)？</span> </p>

</div>

#id1 .class2 span{font-size:14px}

當(dāng)然也可以理解為在原則二層層比較中“少一個(gè)層級(jí)的樣式”，缺少的那個(gè)層級(jí)沒有“層級(jí)較多的樣式”多出的那個(gè)層級(jí)的級(jí)別高。（繞口令）

*將原則四歸入原則三的不合理性，論證：

CODE:

<style type="text/css">

<!--

.class2 .class3{font-size:14px}

span.class3{font-size:12px}

-->

</style>

<div id="id1" class="class1">

<p id="id2" class="class2"> <span id="id3" class="class3">我是多大字號(hào)？</span> </p>

</div>

上例中可以看出，如果將原則四并入原則三，將span.class3看作兩層，那么應(yīng)該和.class2 .class3層級(jí)一樣多，那么應(yīng)該顯示12px,而事實(shí)不是這樣。

最終對(duì)決原則四

如果還分不出結(jié)果，則開始原則四的比較：

例子1：

CODE:

<style type="text/css">

<!--

.class1 p.class2 .class3{font-size:14px}

.class1 .class2 .class3{font-size:12px}

-->

</style>

<div id="id1" class="class1">

<p id="id2" class="class2"> <span id="id3" class="class3">我是多大字號(hào)？</span> </p>

</div>

.class1 p.class2 .class3{font-size:14px}