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

CSS中選擇器的權(quán)重值的計(jì)算

  發(fā)布時(shí)間:2018-01-23 15:48:26   作者:SHERlocked93   我要評論
這篇文章主要介紹了CSS中選擇器的權(quán)重值的計(jì)算的相關(guān)資料,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧

CSS 選擇器權(quán)重值

CSS 具有自己的優(yōu)先級(jí)計(jì)算方法,而不僅僅是行間>內(nèi)部>外部、ID>class>元素

1. 樣式類型

行間樣式

<h1 style="font-size:12px;color:#000;">我的行間CSS樣式。</h1>

內(nèi)聯(lián)樣式

<style type="text/css">
  h1{font-size:12px;
      color:#000;
      }
</style>

外部樣式

<link rel="stylesheet" href="css/style.css">

2. 選擇器類型

選擇器 栗子
ID #id
class .class
標(biāo)簽 p
屬性 [type='text']
偽類 :hover
偽元素 ::first-line
相鄰選擇器、子代選擇器 > +

3. 權(quán)重計(jì)算規(guī)則

  1. 內(nèi)聯(lián)樣式,如: style="...",權(quán)值為1000。
  2. ID選擇器,如:#content,權(quán)值為0100。
  3. 類,偽類、屬性選擇器,如.content,權(quán)值為0010。
  4. 類型選擇器、偽元素選擇器,如div p,權(quán)值為0001。
  5. 通配符、子選擇器、相鄰選擇器等。如* > +,權(quán)值為0000。
  6. 繼承的樣式?jīng)]有權(quán)值

4. 比較規(guī)則

1,0,0,0 > 0,99,99,99。也就是說從左往右逐個(gè)等級(jí)比較,前一等級(jí)相等才往后比。

無論是行間、內(nèi)部和外部樣式,都是按照這個(gè)規(guī)則來進(jìn)行比較。而不是直觀的行間>內(nèi)部>外部樣式;ID>class>元素。之所以有這樣的錯(cuò)覺,是因?yàn)榇_實(shí)行間為第一等的權(quán)重,所以它的權(quán)重是最高的。而內(nèi)部樣式可能一般寫在了外部樣式引用了之后,所以覆蓋掉了之前的。

在權(quán)重相同的情況下,后面的樣式會(huì)覆蓋掉前面的樣式。

通配符、子選擇器、相鄰選擇器等的。雖然權(quán)值為0000,但是也比繼承的樣式優(yōu)先,0 權(quán)值比無權(quán)值優(yōu)先。

5. !important

!important 的作用是提升優(yōu)先級(jí),換句話說。加了這句的樣式的優(yōu)先級(jí)是最高的(比內(nèi)聯(lián)樣式的優(yōu)先級(jí)還高)。

<style>
    p{color:red !important;}
</style>
<p style="color:blue;">我顯示紅色</p> 

ie7+和別的瀏覽器對important的這種作用的支持度都很好。只有ie6-有些bug

p{
  color:red !important;
  color:blue;    
}        //會(huì)顯示blue

但是這并不說明ie6不支持important,只是支持上有些bug。

p{color:red !important;  }
p{color:blue;}        // 這樣就會(huì)顯示的是red。說明ie6還是支持important的

當(dāng) !important 規(guī)則被應(yīng)用在一個(gè)樣式聲明中時(shí),該樣式聲明會(huì)覆蓋CSS中任何其他的聲明,無論它處在聲明列表中的哪個(gè)位置。盡管如此,!important 規(guī)則還是與優(yōu)先級(jí)毫無關(guān)系。使用 !important 不是一個(gè)好習(xí)慣,因?yàn)樗淖兞四銟邮奖肀緛淼募?jí)聯(lián)規(guī)則,從而難以調(diào)試。

在使用 !important 時(shí)需要注意:

  1. Never 永遠(yuǎn)不要在全站范圍的 css 上使用 !important
  2. Only 只在需要覆蓋全站或外部 css(例如引用的 ExtJs 或者YUI )的特定頁面中使用 !important
  3. Never 永遠(yuǎn)不要在你的插件中使用 !important
  4. Always 要優(yōu)化考慮使用樣式規(guī)則的優(yōu)先級(jí)來解決問題而不是 !important

網(wǎng)上的帖子大多深淺不一,甚至有些前后矛盾,在下的文章都是學(xué)習(xí)過程中的總結(jié),如果發(fā)現(xiàn)錯(cuò)誤,歡迎留言指出~

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

最新評論