欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS特殊性、繼承與層疊

  發(fā)布時間：2016-07-14 17:13:55   作者：佚名   我要評論
這篇文章主要介紹了CSS特殊性、繼承與層疊的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下

一、特殊性規(guī)則

選擇器的特殊性由選擇器本身的組件確定；特殊性由四個部分組成，其初始值為0，0，0，0。

1. 對于選擇器中的每一個id，加0，1，0，0；

2. 對于選擇器中的每一個類、偽類、屬性選擇，加0，0，1，0；

3. 對于選擇器中的每一個元素、偽元素，加0，0，0，1；

4. 結(jié)合符與通配符對于選擇器的特殊性沒有任何貢獻。

注意：

1. 0，0，1，0的特殊性比0，0，0，13的特殊性更高。

2. 通配符 * 的特殊性為0，0，0，0，它是有特殊性的；結(jié)合符（比如h1+p中的“+”）根本沒有特殊性；繼承而來的樣式也沒有特殊性。

請看如下代碼：

CSS Code復制內(nèi)容到剪貼板
  1. <head>
  2. <style>
  3. *{
  4. color:red;
  5. }
  6. body{
  7. color:cyan;
  8. }
  9. </style>
  10. </head>
  11. <body>
  12. <p>Whatkindofcolorthisparawillbe?</p>
  13. </body>

頁面顯示如下：

關于通配符 * ：由于 * 適用于所有元素，而且有0特殊性，往往會在不經(jīng)意間造成繼承無法實現(xiàn)的情況，應該盡量避免使用 * 選擇器。

3. 指定id屬性的屬性選擇器與id選擇器有本質(zhì)區(qū)別，比如：

CSS Code復制內(nèi)容到剪貼板
  1. <head>
  2. <style>
  3. div[id="test"]p{
  4. color:red;
  5. }
  6. #testp{
  7. color:cyan;
  8. }
  9. </style>
  10. </head>
  11. <body>
  12. <divid="test">
  13. <p>Whatkindofcolorthisparawillbe?</p>
  14. </div>
  15. </body>

頁面效果：

4. 行內(nèi)樣式的特殊性最高，為1，0，0，0。

5. 標記為!important的聲明被稱為重要聲明，它沒有特殊性，不過要與非重要聲明分開考慮。

具體而言：非重要聲明分為一組，它們之間的沖突使用特殊性解決；重要聲明分為一組，它們之間的沖突內(nèi)部解決；重要聲明總是比非重要聲明優(yōu)先。

二、繼承

1. 繼承沒有任何特殊性，記住這一點往往能明白很多問題。

請看如下代碼：

CSS Code復制內(nèi)容到剪貼板
  1. <head>
  2. <style>
  3. p{
  4. color:red;
  5. }
  6. </style>
  7. </head>
  8. <body>
  9. <p>Whatkindofcolorthis<ahref="#">link</a>willbe?</p>
  10. </body>

頁面效果：

為什么設置了<p>元素的顏色為紅色，<a>元素的顏色卻是藍色？

這并不是因為<a>元素不繼承父元素的顏色（原諒我之前就是這么認為的），而是因為<a>元素繼承了<p>元素的顏色，但是這個繼承來的樣式根本沒有特殊性，然而瀏覽器默認樣式中對<a>元素設置了樣式，很明顯瀏覽器默認樣式的特殊性更高，于是<a>元素就按照瀏覽器默認樣式顯示。

2. 關于CSS中的繼承：一般而言，只能子元素繼承父元素的樣式，也就是說樣式在DOM中只能向下傳遞，不能向上；但是有一個例外，應用到body元素的背景樣式可以向上傳遞到html元素，相應地可以定義其畫布。

三、層疊

層疊規(guī)則：

1. 按權重排序。讀者重要聲明>作者重要聲明>作者一般聲明>讀者一般聲明>用戶代理聲明。

2. 權重相同的情況下，按照特殊性排序，特殊性越高的勝出。

3. 特殊性相同的情況下，按照樣式表中的順序排序，后出現(xiàn)的勝出。

btw，正是因為這個規(guī)則，才會使用LoVe-HA的順序聲明鏈接樣式（LoVe-HA 依次為 :link; :visited; :hover; :active）。

相關文章

  • HTML5和CSS3實例教程總結(jié)(推薦)

    下面小編就為大家?guī)硪黄狧TML5和CSS3實例教程總結(jié)(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-07-18

  • 老生常談css中float的用法

    下面小編就為大家?guī)硪黄仙Ｕ刢ss中float的用法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-07-18

  • CSS3實現(xiàn)iPhone滑動解鎖功能代碼

    這篇文章主要介紹了CSS3實現(xiàn)iPhone滑動解鎖功能代碼的相關資料,需要的朋友可以參考下
    2016-07-18

  • 響應式設計你需要了解的知識點

    響應式網(wǎng)站設計的理念就是頁面的設計與開發(fā)應當根據(jù)用戶行為以及設備環(huán)境進行相應的響應和調(diào)整，這篇文章就帶大家簡單了解一下響應式設計，感興趣的小伙伴們可以參考一下
    2016-07-15

  • CSS布局基礎BFC

    這篇文章主要介紹了CSS布局基礎BFC 的相關資料,需要的朋友可以參考下
    2016-07-14

  • 創(chuàng)建新元素的三種方法小結(jié)

    下面小編就為大家?guī)硪黄獎?chuàng)建新元素的三種方法小結(jié)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-07-18

最新評論