欢乐颂小说在线阅读,好看的课外书

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

剖析CSS規(guī)則之執(zhí)行順序

你對CSS規(guī)則的執(zhí)行順序是否了解，這里和大家分享一下，若兩條規(guī)則具有相同的權(quán)值、起源及特殊性，那在樣式表中最后出現(xiàn)的規(guī)則優(yōu)先。

成都網(wǎng)站設(shè)計、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)介紹好的網(wǎng)站是理念、設(shè)計和技術(shù)的結(jié)合。創(chuàng)新互聯(lián)擁有的網(wǎng)站設(shè)計理念、多方位的設(shè)計風(fēng)格、經(jīng)驗豐富的設(shè)計團隊。提供PC端+手機端網(wǎng)站建設(shè)，用營銷思維進行網(wǎng)站設(shè)計、采用先進技術(shù)開源代碼、注重用戶體驗與SEO基礎(chǔ)，將技術(shù)與創(chuàng)意整合到網(wǎng)站之中，以契合客戶的方式做到創(chuàng)意性的視覺化效果。

CSS規(guī)則的執(zhí)行順序

1、CSS規(guī)則之特殊性

首先來看一下這個例子將會發(fā)生的情形：

程序代碼

 
 
 
  
  
  .grape{color:Blue;}H1{color:Red;}    
  
     
  
  Meerkat    
  
  Central

H1和.grape都匹配上面的H1元素，那么到底應(yīng)該使用哪一個呢？實踐證明.grape是正確答案，把句子顯示為藍色。根據(jù)規(guī)范，一般的HTML元素選擇符(H1,P等)具有特殊性：

1，類選擇符具有特殊性10，ID選擇符具有特殊性100，值越大權(quán)重就越大，就優(yōu)先選用。

程序代碼

 
 
 
  
  
  H1{color:Red;}/*特殊性=1*/PEM{color:Blue;}    
  
     
  
  /*特殊性=2*/.grape{color:Fuchsia;}    
  
     
  
  /*特殊性=10*/P.bright{color:Yellow;}    
  
     
  
  /*特殊性=11*/P.brightEM.dark{color:Gray;}    
  
     
  
  /*特殊性=12*/#ID01{color:Red;}    
  
     
  
  /*特殊性=100*/

2、CSS規(guī)則之繼承

在特殊性的框架下，被繼承的值具有特殊性0，也就是說任何顯式聲明的規(guī)則將會覆蓋其繼承樣式，即便這條規(guī)則具有多高的權(quán)重。

程序代碼

 
 
 
  
  
  H1#ID01{color:Red;}    
  
     
  
  /*特殊性=101*/EM{color:Gray;}    
  
     
  
  /*特殊性=1*/   
  
     
  
  Meerkat

雖然ID選擇符特殊性最高，但由于在特殊性的框架下，繼承值只有特殊性0，因些Central會顯示為Gray顏色。

3、CSS規(guī)則之STYLE元素

還有sytle元素在CSS下權(quán)值定義為100，盡管ID選擇也一樣，實際上style元素比ID具有更高的特殊性。

程序代碼

 
 
 
  
  
  #ID01EM{color:Gray;}    
  
     
  
  Meerkat    
  
     
  
     
  
     
  
  Central   
  
     
  
  !

會顯示為red顏色。

4、CSS規(guī)則之重要性(!important)

!important具最高特特性比如說1000，因此!important規(guī)則會覆蓋內(nèi)聯(lián)STYLE屬性的內(nèi)容。程序代碼
H1{color:red!important;}MeerkatCentral!

將顯示為RED顏色。一種特殊情形

程序代碼

 
 
 
  
  
  P#warn{color:Red!important;}EM{color:Black;}    
  
     
  
  Thistextisred,but 
  
  
     
  
  emphasizedtextisblack.

雖然定義!important最高特殊性，但句子并沒有全部顯示為RED紅色，為什么呢？也許我們得回頭看看前面的規(guī)則，在前面的第二點繼承中提“在特殊性的框架下，繼承值只有特殊性0?！币虼思幢愣x!important，繼承里的特殊性也只有0，所以顯示為特殊性為1的EM規(guī)則。權(quán)重順序為：繼承=>HTML普通選擇符=>類選擇符=>style元素=>!important

5、CSS規(guī)則之層疊

1)若兩條規(guī)則具有相同的權(quán)值、起源及特殊性，那在樣式表中最后出現(xiàn)的規(guī)則優(yōu)先。

2)任何位于文檔中的規(guī)則都比引入的規(guī)則優(yōu)先。

當(dāng)前名稱：剖析CSS規(guī)則之執(zhí)行順序
URL分享：http://fisionsoft.com.cn/article/dhepssg.html

新聞中心

其他資訊