日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
剖析CSS規(guī)則之執(zhí)行順序

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

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

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

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

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

程序代碼

 
 
 
    
  
  
  
  1. .grape{color:Blue;}H1{color:Red;}  
    2.   
  
  
  2.  
    3.   
  
  
  3. Meerkat  
    4.   
  
  
  4. Central  
    5.   
  
  
  5.  
    6.   
  
  
  6.  
    7.   
  
  
  7.  
    8.

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

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

程序代碼

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

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

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

程序代碼

 
 
 
    
  
  
  
  1. H1#ID01{color:Red;}  
    2.   
  
  
  2.  
    3.   
  
  
  3. /*特殊性=101*/EM{color:Gray;}  
    4.   
  
  
  4.  
    5.   
  
  
  5. /*特殊性=1*/ 
    6.   
  
  
  6.  
    7.   
  
  
  7. Meerkat 
    8.   
  
  
  8.  
    9.   
  
  
  9.  
    10.   
  
  
  10.  
    11.   
  
  
  11.  
    12.

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

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

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

程序代碼

 
 
 
    
  
  
  
  1. #ID01EM{color:Gray;}  
    2.   
  
  
  2.  
    3.   
  
  
  3. Meerkat  
    4.   
  
  
  4.  
    5.   
  
  
  5.  
    6.   
  
  
  6.  
    7.   
  
  
  7. Central 
    8.   
  
  
  8.  
    9.   
  
  
  9. ! 
    10.

會顯示為red顏色。

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

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

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

程序代碼

 
 
 
    
  
  
  
  1. P#warn{color:Red!important;}EM{color:Black;}  
    2.   
  
  
  2.  
    3.   
  
  
  3. Thistextisred,but 
    4.   
  
  
  4.  
    5.   
  
  
  5. emphasizedtextisblack. 
    6.   
  
  
  6.  
    7.   
  
  
  7.  
    8.

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

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

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

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


分享標(biāo)題：剖析CSS規(guī)則之執(zhí)行順序
文章地址：http://www.5511xx.com/article/dhepssg.html