国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

BlackHole1 / 2173人閱讀

摘要：內(nèi)聯(lián)樣式外部樣式選擇器類型選擇器栗子標(biāo)簽屬性偽類偽元素相鄰選擇器子代選擇器權(quán)重計(jì)算規(guī)則內(nèi)聯(lián)樣式，如，權(quán)值為。選擇器，如，權(quán)值為。之所以有這樣的錯(cuò)覺，是因?yàn)榇_實(shí)行間為第一等的權(quán)重，所以它的權(quán)重是最高的。通配符子選擇器相鄰選擇器等的。

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

1. 樣式類型

行間樣式

我的行間CSS樣式。

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

外部樣式

2. 選擇器類型
選擇器 栗子
ID #id
class .class
標(biāo)簽 p
屬性 [type="text"]
偽類 :hover
偽元素 ::first-line
相鄰選擇器、子代選擇器 > +
3. 權(quán)重計(jì)算規(guī)則

內(nèi)聯(lián)樣式，如: style="..."，權(quán)值為1000。

ID選擇器，如：#content，權(quán)值為0100。

類，偽類、屬性選擇器，如.content，權(quán)值為0010。

類型選擇器、偽元素選擇器，如div p，權(quán)值為0001。

通配符、子選擇器、相鄰選擇器等。如* > +，權(quán)值為0000。

繼承的樣式?jīng)]有權(quán)值

4. 比較規(guī)則

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

無(wú)論是行間、內(nèi)部和外部樣式，都是按照這個(gè)規(guī)則來(lái)進(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)值比無(wú)權(quán)值優(yōu)先。

5. !important

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



我顯示紅色
　

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

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

但是這并不說(shuō)明ie6不支持important，只是支持上有些bug。

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

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

Never 永遠(yuǎn)不要在全站范圍的 css 上使用 !important

Only 只在需要覆蓋全站或外部 css（例如引用的 ExtJs 或者YUI ）的特定頁(yè)面中使用 !important

Never 永遠(yuǎn)不要在你的插件中使用 !important

Always 要優(yōu)化考慮使用樣式規(guī)則的優(yōu)先級(jí)來(lái)解決問題而不是 !important

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

參考：



CSS 選擇器權(quán)重計(jì)算規(guī)則


MDN 優(yōu)先級(jí)是如何計(jì)算的？

PS：歡迎大家關(guān)注我的公眾號(hào)【前端下午茶】，一起加油吧~

另外可以加入「前端下午茶交流群」微信群，長(zhǎng)按識(shí)別下面二維碼即可加我好友，備注加群，我拉你入群～

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/113038.html

相關(guān)文章

  • CSS優(yōu)先級(jí)的及其衡量標(biāo)準(zhǔn)CSS權(quán)重

    摘要：優(yōu)先級(jí)是由權(quán)重來(lái)作為衡量標(biāo)準(zhǔn)的，權(quán)重的計(jì)算有一套計(jì)算公式，有如下規(guī)范使用一個(gè)位數(shù)的字串來(lái)表示級(jí)別，從左到右，左邊的做大，往右依次遞減，且數(shù)位之間沒有進(jìn)制，級(jí)別之間不可逾越。定義了一個(gè)命令，該命令被賦予最大的優(yōu)先級(jí)。一、背景 CSS有三大特性：層疊性、繼承性、優(yōu)先級(jí)。 而我們?cè)诮oCSS定義樣式的時(shí)候，經(jīng)常出現(xiàn)兩個(gè)及以上的規(guī)則應(yīng)用在同一元素上，單該元素最終在瀏覽器呈現(xiàn)的效果是應(yīng)用的哪個(gè)規(guī)則呢？這...

    ky0ncheng 評(píng)論0 收藏0

  • [譯]HTML&CSS Lesson3: 了解CSS

    摘要：我們會(huì)在組合選擇器中來(lái)了解為什么權(quán)重值要加連字符。組合選擇器中的權(quán)重值會(huì)分別對(duì)不同類型的選擇器進(jìn)行計(jì)數(shù)。對(duì)比兩組選擇器，第二組選擇器有兩個(gè)選擇器，擁有更高的權(quán)重值。 CSS是一門復(fù)雜的語(yǔ)言，擁有相當(dāng)?shù)拇竽芰Α?它我們?cè)试S為頁(yè)面添加布局和設(shè)計(jì)，允許多個(gè)元素甚至多個(gè)頁(yè)面共享樣式。在我們有能力解鎖所有功能之前，我們必須先充分理解它的基礎(chǔ)點(diǎn)。 首先，我們要明確的了解樣式是怎么被渲染的。 具體的...

    lavnFan 評(píng)論0 收藏0

  • [譯]HTML&CSS Lesson3: 了解CSS

    摘要：我們會(huì)在組合選擇器中來(lái)了解為什么權(quán)重值要加連字符。組合選擇器中的權(quán)重值會(huì)分別對(duì)不同類型的選擇器進(jìn)行計(jì)數(shù)。對(duì)比兩組選擇器，第二組選擇器有兩個(gè)選擇器，擁有更高的權(quán)重值。 CSS是一門復(fù)雜的語(yǔ)言，擁有相當(dāng)?shù)拇竽芰Α?它我們?cè)试S為頁(yè)面添加布局和設(shè)計(jì)，允許多個(gè)元素甚至多個(gè)頁(yè)面共享樣式。在我們有能力解鎖所有功能之前，我們必須先充分理解它的基礎(chǔ)點(diǎn)。 首先，我們要明確的了解樣式是怎么被渲染的。 具體的...

    soasme 評(píng)論0 收藏0

  • 你對(duì)CSS權(quán)重真的足夠了解嗎？

    摘要：如果兩個(gè)權(quán)重不同的選擇器作用在同一元素上，權(quán)重值高的規(guī)則生效選擇器可能會(huì)包含一個(gè)或者多個(gè)與權(quán)重相關(guān)的計(jì)算點(diǎn)，若經(jīng)過權(quán)重值計(jì)算得到的權(quán)重值越大，則認(rèn)為這個(gè)選擇器的權(quán)重高。 前言 css權(quán)重很多人都聽過，也了解一些，但是很多人對(duì)具體的規(guī)則或者說(shuō)再深如一些關(guān)于css權(quán)重的問題，可能會(huì)不那么清楚。日常開發(fā)中，或多或少都會(huì)遇到css規(guī)則不生效的問題，為了讓我們能夠減少調(diào)試css規(guī)則的時(shí)間，深刻理...

    xioqua 評(píng)論0 收藏0

  • 20180224-css選擇器的權(quán)重

    摘要：選擇器的權(quán)重第一種情況樣式表中只有單一樣式即內(nèi)聯(lián)元素第二種情況組合選擇器從左往右逐個(gè)比較，按進(jìn)行比較越大權(quán)重越高。 css選擇器的權(quán)重showImg(https://segmentfault.com/img/bV4dpB?w=542&h=376); 1第一種情況： 樣式表中只有單一樣式： 即 內(nèi)聯(lián)>id>class>元素 #id{} .class{} p{} 2第二種情況： 組合選擇器...

    鄒強(qiáng) 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<