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

CSS特殊性、繼承與層疊

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

一、特殊性規(guī)則

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

1. 對(duì)于選擇器中的每一個(gè)id，加0，1，0，0；

2. 對(duì)于選擇器中的每一個(gè)類(lèi)、偽類(lèi)、屬性選擇，加0，0，1，0；

3. 對(duì)于選擇器中的每一個(gè)元素、偽元素，加0，0，0，1；

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

注意：

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

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

請(qǐng)看如下代碼：

CSS Code復(fù)制內(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>

頁(yè)面顯示如下：

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

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

CSS Code復(fù)制內(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>

頁(yè)面效果：

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

5. 標(biāo)記為!important的聲明被稱(chēng)為重要聲明，它沒(méi)有特殊性，不過(guò)要與非重要聲明分開(kāi)考慮。

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

二、繼承

1. 繼承沒(méi)有任何特殊性，記住這一點(diǎn)往往能明白很多問(wèn)題。

請(qǐng)看如下代碼：

CSS Code復(fù)制內(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>

頁(yè)面效果：

為什么設(shè)置了<p>元素的顏色為紅色，<a>元素的顏色卻是藍(lán)色？

這并不是因?yàn)?lt;a>元素不繼承父元素的顏色（原諒我之前就是這么認(rèn)為的），而是因?yàn)?lt;a>元素繼承了<p>元素的顏色，但是這個(gè)繼承來(lái)的樣式根本沒(méi)有特殊性，然而瀏覽器默認(rèn)樣式中對(duì)<a>元素設(shè)置了樣式，很明顯瀏覽器默認(rèn)樣式的特殊性更高，于是<a>元素就按照瀏覽器默認(rèn)樣式顯示。

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

三、層疊

層疊規(guī)則：

1. 按權(quán)重排序。讀者重要聲明>作者重要聲明>作者一般聲明>讀者一般聲明>用戶(hù)代理聲明。

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

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

btw，正是因?yàn)檫@個(gè)規(guī)則，才會(huì)使用LoVe-HA的順序聲明鏈接樣式（LoVe-HA 依次為 :link; :visited; :hover; :active）。

相關(guān)文章

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

    下面小編就為大家?guī)?lái)一篇HTML5和CSS3實(shí)例教程總結(jié)(推薦)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2016-07-18

  • 老生常談css中float的用法

    下面小編就為大家?guī)?lái)一篇老生常談css中float的用法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2016-07-18

  • CSS3實(shí)現(xiàn)iPhone滑動(dòng)解鎖功能代碼

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

  • 響應(yīng)式設(shè)計(jì)你需要了解的知識(shí)點(diǎn)

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

  • CSS布局基礎(chǔ)BFC

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

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

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

最新評(píng)論