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

詳解CSS中的選擇器優(yōu)先級(jí)及樣式層疊問(wèn)題解決

haorooms   發(fā)布時(shí)間：2016-06-14 11:25:26   作者：Aaron   我要評(píng)論
CSS中的選擇器是分權(quán)重的,如果不加注意則很有可能會(huì)遇到樣式層疊的問(wèn)題,下面我們就來(lái)詳解CSS中的選擇器優(yōu)先級(jí)及樣式層疊問(wèn)題解決,需要的朋友可以參考下

一. 新手的疑問(wèn)
大家經(jīng)常在網(wǎng)頁(yè)中看到類似 li#first 這樣的選擇器。很多新手疑問(wèn)了？由于使用 id 就已經(jīng)可以確定元素了，為什么前面還要加一個(gè) li？ 直接寫上 #first 這樣的 id 選擇器就可以了。聽(tīng)起來(lái)說(shuō)得不錯(cuò)，簡(jiǎn)單測(cè)試一下也沒(méi)有問(wèn)題。
可是，我們經(jīng)?？吹綆в性孛Q的選擇器，例如，在微軟的項(xiàng)目模板中就有大量的帶有元素名稱的選擇器，如果沒(méi)有用的話，為什么要這樣寫呢？哈哈哈，這么寫是有原因的，下面就帶大家一起看一下！

CSS Code復(fù)制內(nèi)容到剪貼板
  1. ul#navlist   
  2. {   
  3.     float: rightright;   
  4. }   
  5. ul#navlist li   
  6. {   
  7.     display: inline;   
  8. }  

二. 問(wèn)題出現(xiàn)了
寫一個(gè)簡(jiǎn)單的菜單，使用 ul 和 li 實(shí)現(xiàn)，菜單項(xiàng)之間使用邊框來(lái)實(shí)現(xiàn)間隔線。
html 代碼如下：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <ul id="navlist">  
  2.     <li class="first"><a href="/" id="current">Home</a></li>  
  3.     <li><a href="#">Store</a></li>  
  4.     <li><a href="#">ShoppingCart</a></li>  
  5.     <li><a href="#">Admin</a></li>  
  6. </ul>  

使用下面的樣式表，首先通過(guò)為所有的超級(jí)鏈接增加一個(gè)左邊框來(lái)畫(huà)出間隔的虛線，然后將第一個(gè)菜單項(xiàng)的左邊框去掉，我的第一個(gè)樣式使用了 .first a。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. ul#navlist li   
  2. {   
  3.     display: inline;   
  4. }   
  5. ul#navlist li a   
  6. {   
  7.     border-left: 1px dotted #8A8575;   
  8.     padding: 10px;   
  9.     margin-top: 10px;   
  10.     color: #8A8575;   
  11.     text-decoration: none;   
  12.     float: left;   
  13. }   
  14. .first a   
  15. {   
  16.     border: none;   
  17. }  

看一下效果，完全沒(méi)有反應(yīng)。
2016614112721896.png (361×73)

還有的地方說(shuō) id 選擇器的級(jí)別比較高，那么將類改成 id 。

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <li id="first"><a href="/" id="current">Home</a></li>  

將樣式表也進(jìn)行相應(yīng)的修改。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. #first a   
  2. {   
  3.     border: none;   
  4. }  

可是結(jié)果呢？巋然不動(dòng)！
2016614112801641.png (361×73)

用火狐的 firebug 看一看，被忽略了。
2016614112924392.png (256×180)

三. 原因
為什么我的樣式被秒殺了？
網(wǎng)上有大量的文章，但是說(shuō)法并不一致，有的說(shuō)要考慮三個(gè)級(jí)別，可是也有的說(shuō)需要考慮四個(gè)級(jí)別，但是總的方向大致是關(guān)于層疊的。
不如到 W3C 的網(wǎng)站上看一個(gè)究竟。相關(guān)的標(biāo)準(zhǔn)在 這個(gè)頁(yè)面 可以看到，目前為止的 CSS 標(biāo)準(zhǔn)有三個(gè): CSS1, CSS2, 以及 CSS3。
CSS1 是最早的標(biāo)準(zhǔn)，其中關(guān)于層疊順序的描述在 這里，還提供了一個(gè)簡(jiǎn)單的示例進(jìn)行說(shuō)明。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. LI            {...}  /* a=0 b=0 c=1 -> specificity =   1 */  
  2. UL LI         {...}  /* a=0 b=0 c=2 -> specificity =   2 */  
  3. UL OL LI      {...}  /* a=0 b=0 c=3 -> specificity =   3 */  
  4. LI.red        {...}  /* a=0 b=1 c=1 -> specificity =  11 */  
  5. UL OL LI.red  {...}  /* a=0 b=1 c=3 -> specificity =  13 */  
  6. #x34y         {...}  /* a=1 b=0 c=0 -> specificity = 100 */  

在 CSS1 中將優(yōu)先級(jí)分為三組，將 id 選擇器作為 a 組，類選擇器作為 b 組，元素名作為 c 組，每組中出現(xiàn)一次，計(jì)數(shù)一次，按照先 a 組進(jìn)行比較，相同的情況下，使用 b 組進(jìn)行比較，最后是 c 組。什么選擇器的優(yōu)先級(jí)別高，什么選擇器提供的樣式有效。比如在上面的例子中，第 5 組使用 id 的級(jí)別最高，所以，這組的樣式設(shè)置生效，而其他的設(shè)置將會(huì)被忽略掉。
CSS21 標(biāo)準(zhǔn)
在 CSS2 中，又增加了關(guān)于行內(nèi)說(shuō)明 style 的組，所以參與比較的組成為了 4 組，其中 style 的優(yōu)先級(jí)別最高。同樣，在 CSS2 的標(biāo)準(zhǔn)說(shuō)明中也提供了樣例。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. *             {}  /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */  
  2.  li            {}  /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */  
  3.  li:first-line {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */  
  4.  ul li         {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */  
  5.  ul ol+li      {}  /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */  
  6.  h1 + *[rel=up]{}  /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */  
  7.  ul ol li.red  {}  /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */  
  8.  li.red.level  {}  /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */  
  9.  #x34y         {}  /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */  
  10.            /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */  
  11. <style type="text/css">   
  12.   #x97z { color: red }   
  13. </style>   
  14. <p id="x97z" style="color: green">   
  15. </p>  

在這個(gè)示例中，style 的優(yōu)先級(jí)別最高，所以將會(huì)覆蓋掉通過(guò) id 進(jìn)行的設(shè)置，顏色為綠色。

四. 解決問(wèn)題
通過(guò)上面的分析可以看到，僅僅提供選擇器并不足以能夠生效，還要看選擇器的優(yōu)先級(jí)別，在我們的問(wèn)題中，即使使用 id 來(lái)選擇第一個(gè)菜單項(xiàng)：#first a ，包括了一個(gè) id 和一個(gè)元素名，那么所得的優(yōu)先級(jí)別為：
a=0, b=1, c=0, d=1
可是，通用的選擇器是這樣的：ul#navlist li a，優(yōu)先級(jí)中卻包括了一個(gè) id, 還有 3 個(gè)元素名稱，所以優(yōu)先級(jí)別為：
a=0, b=1, c=0, d=3
所以我們的選擇器沒(méi)有比過(guò)通用的選擇器，悲劇發(fā)生了！
知道了原因，問(wèn)題也就簡(jiǎn)單了，提高我們選擇器的優(yōu)先級(jí)別，超過(guò)通用選擇器的優(yōu)先級(jí)就可以了，比如，我們可以寫成這樣：
ul#navlist li#first a
現(xiàn)在的優(yōu)先級(jí)是多少呢？
a=0, b=2, c=0, d=3
在 b 組比較的時(shí)候就已經(jīng)超過(guò)了，看看是否已經(jīng)成功了！果然成功了，如下！
2016614113029700.png (328×56)

還可以加上重要性說(shuō)明，也可以解決。!important 必須寫在樣式與分號(hào)之間，每個(gè)樣式必須單獨(dú)聲明。這個(gè)也可以用來(lái)調(diào)整兼容性問(wèn)題，IE6不識(shí)別!important;話說(shuō)回來(lái)，兼容問(wèn)題最好還是用hack方法解決比較好！

CSS Code復(fù)制內(nèi)容到剪貼板
  1. #first a   
  2. {   
  3.     border: none !important;   
  4. }  

五. 總結(jié)
通過(guò)上面的描述，不知道大家對(duì)于選擇器的權(quán)重有了一定的了解沒(méi)有。理解選擇器的權(quán)重，可以更好的控制樣式，用權(quán)重高的樣式去覆蓋掉那些權(quán)重低的樣式！理解css的這一點(diǎn)，很重要！

相關(guān)文章

  • CSS優(yōu)先級(jí)計(jì)算的規(guī)則

    這篇文章主要介紹了CSS優(yōu)先級(jí)計(jì)算的規(guī)則,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-07-17

  • css優(yōu)先級(jí)計(jì)算方法(推薦)

    下面小編就為大家?guī)?lái)一篇css優(yōu)先級(jí)計(jì)算方法(推薦)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2016-07-19

  • 詳解CSS中的選擇器優(yōu)先級(jí)順序

    CSS在使用選擇器對(duì)元素施加屬性的時(shí)候會(huì)有先后順序,包括特殊性和重要性等概念在內(nèi),這里我們就來(lái)詳解CSS中的選擇器優(yōu)先級(jí)順序,需要的朋友可以參考下
    2016-06-21

  • CSS z-index 層級(jí)關(guān)系優(yōu)先級(jí)的概念

    這篇文章主要介紹CSS z-index 層級(jí)關(guān)系優(yōu)先級(jí)的概念，講解的比較詳細(xì)，需要的朋友可以參考下。
    2016-06-06

  • CSS優(yōu)先級(jí)的兩種理解方式

    本文給大家分享css 優(yōu)先級(jí)的兩種理解方式，每種方式給大家介紹的非常詳細(xì)，需要的朋友參考下吧
    2020-02-06

最新評(píng)論