亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

css樣式優(yōu)先級及層疊的順序排序探討

  發(fā)布時間：2013-03-14 10:06:09   作者：佚名   我要評論
css樣式優(yōu)先級是按照樣式表中出現(xiàn)順序還是按照元素中class或者id值的聲明順序呢，這個問題貌似一直存在我們身邊卻一直無從選擇，接下來用實例為大家說明下，到底哪個高點，感興趣的你可不要錯過了哈
一般情況下：
[1位重要標(biāo)志位] > [4位特殊性標(biāo)志] > 聲明先后順序
!important > [ id > class > tag ]
使用!important可以改變優(yōu)先級別為最高，其次是style對象，然后是id > class >tag ，另外，另外在同級樣式按照申明的順序后出現(xiàn)的樣式具有高優(yōu)先級。
­
先來看下!important 這個詭異的東西

復(fù)制代碼
代碼如下:

<style type="text/css">
div{background: red !important; background: blue}
</style>

除了IE6，其他瀏覽器都會顯示背景為紅色，正是!important的作用，意思就是只要我在這里我就是最重要的啦，任何東西都不能取代我，沒看見都是一個 ！外加一個英文單詞 important 嗎？很形象，很貼切了。IE6這里會顯示背景為藍(lán)色，并不是IE6不支持!important，而是它會按照樣式聲明順序后出現(xiàn)的覆蓋前面的，此時它已經(jīng)不認(rèn)識!important了，它六親不認(rèn)了。這正是廣為流傳的IE6 hack之一。而如果這樣寫會正常顯示背景為紅色：

復(fù)制代碼
代碼如下:

<style type="text/css">
div{background: blue; background: red !important; }
</style>

再來看下4位特殊性標(biāo)志 [0.0.0.0]
從左至右，每次給某一個位置+1，前一段對后一段具有無可辯駁的壓倒性優(yōu)勢。無論后一位數(shù)值有多大永遠(yuǎn)無法超過前一位的1。
1，內(nèi)聯(lián)樣式 [1.0.0.0]
A：<span id="demo" style="color:red "></span>
B：還有就是JS控制的內(nèi)聯(lián)樣式style對象，document.getElementById("demo").style.color="red";
這兩者屬于同一級別，不過一般情況是JS控制的內(nèi)聯(lián)樣式優(yōu)先級高，這與先后順序申明有關(guān)系與本質(zhì)無關(guān)，因為往往DOM操作是在DOM樹加載完畢之后。
2，ID選擇器 [0.1.0.0]
3，類，屬性，偽類 選擇器 [0.0.1.0]
4，元素標(biāo)簽，偽元素 選擇器 [0.0.0.1]
關(guān)于CSS選擇器可以查看W3C或者CSS的手冊，不啰嗦了。
注意下 偽類選擇器
LVHA偽類,樣式按LVHA優(yōu)先級順序從右至左覆蓋，不同的順序會產(chǎn)生不同的效果。
a:link - 默認(rèn)鏈接樣式
a:visited - 已訪問鏈接樣式
a:hover - 鼠標(biāo)懸停樣式
a:active - 鼠標(biāo)點擊樣式
最后寫下關(guān)于JS控制內(nèi)聯(lián)樣式 帶!important的現(xiàn)象：
看下正常的Demo1：

復(fù)制代碼
代碼如下:

<style type="text/css">
div{background: red !important; height:20px;}
#demo1{ background: green;}
.demo1{ background:blue;}
</style>


復(fù)制代碼
代碼如下:

<div class="demo1" id="demo1" style="background: yellow"></div>


復(fù)制代碼
代碼如下:

<script type="text/javascript">
document.getElementById("demo1").style.background="black";
</script>

最終顯示背景為紅色，這應(yīng)該不會有什么問題, !important 放到哪都會改變優(yōu)先級的，而后面的JS代碼也不會改變優(yōu)先級。
--------------------------------------------------------------------------------
另外一個Demo2:

復(fù)制代碼
代碼如下:

<style type="text/css">
div{background: red !important; height:200px;}
#demo2{ background: green;}
.demo2{ background: blue;}
</style>


復(fù)制代碼
代碼如下:

<div class="demo2" id="demo2" style="background: yellow !important"></div>


復(fù)制代碼
代碼如下:

<script type="text/javascript">
document.getElementById("demo2").style.background="black";
</script>

IE6,7 顯示 紅色
FF2+ 顯示 黃色
Opera9+ 顯示 紅色
Safari 顯示 黃色
--------------------------------------------------------------------------------
­Demo3:

復(fù)制代碼
代碼如下:

<style type="text/css">
div{background: red !important; height:200px;}
#demo3{ background: green;}
.demo3{ background: blue;}
</style>


復(fù)制代碼
代碼如下:

<div class="demo3" id="demo3" style="background: yellow !important"> </div>­


復(fù)制代碼
代碼如下:

<script type="text/javascript">
document.getElementById("demo3").style.background="black !important";
</script>

IE6,7 顯示紅色
FF2+ 顯示黃色
Opera9+ 顯示黑色
Safari 顯示黑色
--------------------------------------------------------------------------------
­解釋下上面兩個例子：
­JS控制的style對象 實際就是內(nèi)聯(lián)樣式style，這個沒錯
­
但是對于 JS控制style對象屬性值里增加的!important 三個瀏覽器卻給出了不同的結(jié)果：
­IE：JS控制style對象屬性值完全覆蓋內(nèi)聯(lián)style屬性值，不支持Element.style.property="value !important"，將報錯:參數(shù)無效。
FF2+：不完全支持Element.style.property="value !important" : !important無效，不會報錯, 如果內(nèi)聯(lián)style屬性值無!important，則完全覆蓋，有!important 則內(nèi)聯(lián)style屬性優(yōu)先級最高，不會受JS控制style的任何影響。
Opera9+ ：JS控制style對象屬性值完全覆蓋內(nèi)聯(lián)style屬性值，支持Element.style.property="value !important"。
Safari：支持Element.style.property="value !important" ，如果內(nèi)聯(lián)style屬性值無!important，則完全覆蓋，有!important 則內(nèi)聯(lián)style屬性優(yōu)先級最高，不會受JS控制style的任何影響。

css樣式優(yōu)先級是按照樣式表中出現(xiàn)順序還是按照元素中class或者id值的聲明順序呢？
以前一直以為是class中聲明的遲的值優(yōu)先級高，其實是根據(jù)樣式表中出現(xiàn)的順序來的。
代碼：

復(fù)制代碼
代碼如下:

<style type="text/css">
div{ height: 200px; width: 200px; background: red; }
.b{ background: green; }
.a{ background: blue;}
</style>
</head>
<body>
<div class="a b" 2style="background:pink;">
</div>
</body>

div的樣式會顯示blue的樣式顏色。
學(xué)透前端行業(yè)所有技術(shù)，玩遍北京周邊所有城市。然后我會回到那個生我養(yǎng)我的地方，因為有親人的地方才是家。

相關(guān)文章

  • CSS選擇器種類、優(yōu)先級與匹配原理詳解

    作為一個Web開發(fā)者，掌握必要的前臺技術(shù)也是很重要的特別是CSS選擇器的優(yōu)先級問題，為了廣大web愛好者可以更好的解決問題，這里就CSS選擇器的優(yōu)先級問題做了一些總結(jié)
    2013-08-01

  • CSS控制樣式的三種方式(優(yōu)先級對比驗證)

    大家都知道，CSS的中文名叫做層疊樣式表，而CSS在控制樣式的時候，有三種引入方式,這里簡單介紹下CSS控制樣式的三種方式
    2013-07-22

  • CSS優(yōu)先級的相關(guān)知識詳細(xì)介紹

    所謂CSS優(yōu)先級，即是指CSS樣式在瀏覽器中被解析的先后順序，既然樣式有優(yōu)先級，那么就會有一個規(guī)則來約定這個優(yōu)先級，而這個“規(guī)則”就是本次所需要講的重點
    2013-04-22

  • 網(wǎng)頁css優(yōu)先級為您詳細(xì)解讀

    所謂CSS優(yōu)先級，即是指CSS樣式在瀏覽器中被解析的先后順序，CSS是層疊樣式表（Cascading Style Sheets）的簡稱，我們能通過CSS為文檔設(shè)置豐富且易于修改的外觀
    2013-04-19

  • CSS層疊樣式表之CSS解析機制的優(yōu)先級及樣式覆蓋問題探討

    多重樣式（Multiple Styles）： 如果外部樣式、內(nèi)部樣式和內(nèi)聯(lián)樣式同時應(yīng)用于同一個元素，就是使多重樣式的情況.有個例外的情況，就是如果外部樣式放在內(nèi)部樣式的后面，則
    2013-02-01

  • CSS優(yōu)先級和!important與IE6的BUG討論及解決方案

    本來我對他誰的ie6不支持!important也沒什么異議，可是正好在前幾天正好用個這個!important屬性解決了一個樣式優(yōu)先級的問題，而且是支持ie6的，這是為什么呢？到底ie6支不
    2013-01-23

  • IE6下CSS多類選擇符優(yōu)先級不起作用的bug分析及解決方法

    IE6，這個前端開發(fā)的夢魘總是在你不經(jīng)意的時候給你捅一刀,在ie6環(huán)境下CSS多類選擇符優(yōu)先級不起作用，多么的令人氣憤啊，經(jīng)過測試：IE6下這種類組合的優(yōu)先級不如單個類， 感
    2013-01-23

  • css樣式的優(yōu)先級究竟龐雜到什么程度

    css樣式的優(yōu)先級是一個龐雜的知識點，我甚至覺得它的龐雜可以與“浮動”以及“框模型”相提并論,今天就利用點時間把我所了解的寫下來，大家共同進步
    2013-01-11

  • css選擇器優(yōu)先級深入理解

    css基礎(chǔ)選擇器有標(biāo)簽選擇器、類選擇器、id選擇器、通用選擇器,本文將深入介紹css選擇器優(yōu)先級,這會給正在解決優(yōu)先級問題的朋友，帶來些許幫助
    2012-12-04

  • 同級情況下CSS的優(yōu)先級探討

    CSS的調(diào)用方式一共有4種，分別是：行內(nèi)樣式，內(nèi)嵌式，link鏈接式，@import導(dǎo)入式，在同級的前提下，我們可以按樣就近原則來理解他們的優(yōu)先級，則越前定義的樣式，會被后面
    2010-07-23

最新評論