CSS3特殊性-權重值

來源:互聯網
上載者:User

標籤:yellow   優先順序   檔案中   nbsp   ref   並且   ima   --   參考   

是因為瀏覽器是根據權值來判斷使用哪種css樣式的,權值高的就使用哪種css樣式。

 

 

下面是權值的規則:

 

 

標籤的權值為1,類選擇符的權值為10,ID選擇符的權值最高為100。例如下面的代碼:

下面,再來看一些例子吧?

 

#content div#main-content h2{

    color:red;

}

 

 

#content #main-content>h2{

    color:blue

}

 

 

body #content div[id="main-content"] h2{

    color:green;

}

 

 

#main-content div.paragraph h2{

    color:orange;

}

 

 

#main-content [class="paragraph"] h2{

    color:yellow;

}

 

 

讓我們來一起算算六個樣式規則各自的權值的值:

 

  • 第一個權值=2*100+2*1=202
  • 第二個權值=2*100+1=201
  • 第三個權值=1*100+1*10+3*1=113
  • 第四個權值=1*100+1*10+2*1=112
  • 第五個權值=1*100+1*10+1*1=111

 

注意:還有一個權值比較特殊--繼承也有權值但很低,有的文獻提出它只有0.1,所以可以理解為繼承的權值最低。

 

 

p{color:green;}

<p class="first">三年級時,我還是一個<span>膽小如鼠</span>的小女孩。</p>

最後 p 中的文本會設定為green,這個層疊很好理解,理解為後面的樣式會覆蓋前面的樣式

 

所以前面的css樣式優先順序就不難理解了:

內聯樣式表(標籤內部)> 內建樣式表(當前檔案中)> 外部樣式表(外部檔案中)。

有些特殊的情況需要為某些樣式設定具有最高權值,怎麼辦?這時候我們可以使用!important來解決。

 

 

 

 

 

!important最高優先順序

 

 

如下代碼:

p{color:red!important;}

p{color:green;}

<p class="first">三年級時,我還是一個<span>膽小如鼠</span>的小女孩。</p>

這時 p 段落中的文本會顯示的red紅色。

 

 

注意:!important要寫在分號的前面

 

 

注意: 當網頁製作者不設定css樣式時,瀏覽器會按照自己的一套樣式來顯示網頁。並且使用者也可以在瀏覽器中設定自己習慣的樣式,比如有的使用者習慣把字型大小設定為大一些,使其查看網頁的文本更加清楚。這時注意樣式優先順序為:瀏覽器預設的樣式 < 網頁製作者樣式 < 使用者自己設定的樣式,但記住!important優先順序樣式是個例外,權值高於使用者自己設定的樣式。

 

參考:

         慕課網:http://www.imooc.com/code/2039

         CSDN:http://blog.csdn.net/jane617_min/article/details/48370507

CSS3特殊性-權重值

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.