亚洲一级免费看,特黄特色大片免费观看播放器,777毛片,久久久久国产一区二区三区四区,欧美三级一区二区,国产精品一区二区久久久久,人人澡人人草

網(wǎng)頁設(shè)計(jì)

CSS中樣式覆蓋優(yōu)先順序詳解

時(shí)間:2025-05-15 15:23:14 網(wǎng)頁設(shè)計(jì) 我要投稿
  • 相關(guān)推薦

CSS中樣式覆蓋優(yōu)先順序詳解

  CSS中樣式覆蓋優(yōu)先順序詳解,就跟隨百分網(wǎng)小編一起去了解下吧,想了解更多相關(guān)信息請(qǐng)持續(xù)關(guān)注我們應(yīng)屆畢業(yè)生考試網(wǎng)!

  層疊優(yōu)先級(jí)是:

  瀏覽器缺省 < 外部樣式表 < 內(nèi)部樣式表 < 內(nèi)聯(lián)樣式

  其中樣式表又有:

  類選擇器 < 類派生選擇器 < ID選擇器 < ID派生選擇器

  派生選擇器以前叫上下文選擇器,所以完整的層疊優(yōu)先級(jí)是:

  瀏覽器缺省 < 外部樣式表 < 外部樣式表類選擇器 < 外部樣式表類派生選擇器 < 外部樣式表ID選擇器 < 外部樣式表ID派生選擇器 < 內(nèi)部樣式表 < 內(nèi)部樣式表類選擇器 < 內(nèi)部樣式表類派生選擇器 < 內(nèi)部樣式表ID選擇器 < 內(nèi)部樣式表ID派生選擇器 < 內(nèi)聯(lián)樣式...共12個(gè)優(yōu)先級(jí)

  有時(shí)候在寫CSS的過程中,某些限制總是不起作用,這就涉及了CSS樣式覆蓋的問題,如下

  代碼如下

  #navigator {

  height: 100%;

  width: 200;

  position: absolute;

  left: 0;

  border: solid 2 #EEE;

  }

  .current_block {

  border: solid 2 #AE0;

  }

  查找一些教材中(w3schools等),只說css的順序是“元素上的style” > “文件頭上的style元素” >“外部樣式文件”,但對(duì)于樣式文件中的多個(gè)相同樣式的優(yōu)先級(jí)怎樣排列,沒有詳細(xì)說明。經(jīng)過測(cè)試和繼續(xù)搜索,得知優(yōu)先級(jí)如下排列:

  1. 樣式表的元素選擇器選擇越精確,則其中的樣式優(yōu)先級(jí)越高。

  id選擇器指定的樣式 > 類選擇器指定的樣式 > 元素類型選擇器指定的樣式

  所以上例中,#navigator的樣式優(yōu)先級(jí)大于.current_block的優(yōu)先級(jí),即使.current_block是最新添加的,也不起作用。

  2. 對(duì)于相同類型選擇器指定的樣式,在樣式表文件中,越靠后的優(yōu)先級(jí)越高。

  注意,這里是樣式表文件中越靠后的優(yōu)先級(jí)越高,而不是在元素class出現(xiàn)的順序。比如.class2 在樣式表中出現(xiàn)在.class1之后:

  代碼如下

  .class1 {

  color: black;

  }

  .class2 {

  color: red;

  }

  而某個(gè)元素指定class時(shí)采用 class=”class2 class1″這種方式指定,此時(shí)雖然class1在元素中指定時(shí)排在class2的后面,但因?yàn)樵跇邮奖砦募衏lass1處于class2前面,此時(shí)仍然是class2的優(yōu)先級(jí)更高,color的屬性為red,而非black。

  3. 如果要讓某個(gè)樣式的優(yōu)先級(jí)變高,可以使用!important來指定。

  代碼如下

  .class1 {

  color: black !important;

  }

  .class2 {

  color: red;

  }

  解決方案:

  此時(shí)class將使用black,而非red。

  對(duì)于一開始遇到的問題,有兩種解決方案:

  1. 將border從#navigator中拿出來,放到一個(gè)class .block中,而.block放到.current_block之前:

  代碼如下

  #navigator {

  height: 100%;

  width: 200;

  position: absolute;

  left: 0;

  }

  .block {

  border: solid 2 #EEE;

  }

  .current_block {

  border: solid 2 #AE0;

  }

  需要默認(rèn)為#navigator元素指定class=”block”

  2. 使用!important:

  代碼如下

  #navigator {

  height: 100%;

  width: 200;

  position: absolute;

  left: 0;

  border: solid 2 #EEE;

  }

  .current_block {

  border: solid 2 #AE0 !important;

  }

  此時(shí)無需作任何其他改動(dòng)即可生效?梢姷诙N方案更簡(jiǎn)單一些。

  補(bǔ)充一個(gè)例子

  代碼如下

  <html>

  <head>

  <title></title>

  <style type="text/css">

  p { color: #00FF00 } /* 綠色 */

  .a1 { color: #0000FF } /* 藍(lán)色 */

  .a1 p { color: #00FFFF } /* 青色 */

  .a2 { color: #FF0000 } /* 紅色 */

  #a2 { color: #FFFF00 } /* 黃色 */

  #a2 p { color: #FF00FF } /* 紫色 */

  </style>

  </head>

  <body>

  <p>我是綠色,內(nèi)部樣式表優(yōu)先于瀏覽器缺省</p>

  <p class="a2">我是紅色,類選擇器優(yōu)先于內(nèi)部樣式表</p>

  <p class="a2" id="a2">我是黃色,ID選擇器優(yōu)先于類選擇器</p>

  <p class="a1">

  <span>我是藍(lán)色,類選擇器優(yōu)先于內(nèi)部樣式表</span>

  <p>我是青色,類派生選擇器優(yōu)先于類選擇器</p>

  <p class="a2">我還是青色,類派生選擇器優(yōu)先于所有類選擇器</p>

  <p id="a2">

  <span>我是黃色,ID選擇器優(yōu)先于類派生選擇器</span>

  <p>我是紫色,ID派生選擇器優(yōu)先于類派生選擇器</p>

  <p class="a1">我還是紫色,ID派生選擇器優(yōu)先于所有類選擇器</p>

  <p class="a1" id="a1">我還是紫色,ID派生選擇器優(yōu)先于所有ID選擇器</p>

  <p class="a1" id="a1" style="color:#000000;">我是黑色,內(nèi)聯(lián)樣式駕到閑雜人等退下</p>

  </p>

  </p>

  </body>

  </html>

【CSS中樣式覆蓋優(yōu)先順序詳解】相關(guān)文章:

CSS中樣式覆蓋優(yōu)先順序07-21

DreamWeaver中應(yīng)用CSS樣式表10-07

CSS中position屬性的使用詳解07-25

DreamWeaver中CSS樣式表應(yīng)用技巧10-03

在DreamWeaver中應(yīng)用CSS樣式表技巧07-25

Dreamweaver應(yīng)用CSS樣式09-25

在Dreamweaver中利用CSS樣式表設(shè)置網(wǎng)頁10-24

Dreamweaver應(yīng)用CSS樣式設(shè)計(jì)07-22

Dreamweaver應(yīng)用CSS樣式的方法06-21