成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

CSS 特殊性詳解

Lucky_Boy / 1670人閱讀

摘要：特殊性我們可以用很多種寫法來(lái)定位一個(gè)元素，而選擇器的特殊性值則是決定哪一個(gè)勝出的關(guān)鍵。選擇器的特殊性值其實(shí)很簡(jiǎn)單，就是的形式。按照特殊性對(duì)應(yīng)用到給定元素的所有聲明排序。有較高特殊性的元素權(quán)重要大于有較低的特殊性的元素。

之前學(xué)CSS一直沒(méi)有深入的去研究CSS選擇器的優(yōu)先級(jí)，這次好好的看了下之后寫的時(shí)候特殊性值仿佛都浮現(xiàn)在眼前，現(xiàn)在寫的時(shí)候心里更加清晰，這里梳理一下學(xué)到的東西。

特殊性(specificity)

我們可以用很多種寫法來(lái)定位一個(gè)元素，而選擇器的特殊性值則是決定哪一個(gè)勝出的關(guān)鍵。選擇器的特殊性值其實(shí)很簡(jiǎn)單，就是 0,0,0,1/0,1,0,1/0,0,0,5/... 的形式。

主要有四個(gè)規(guī)則:

用了ID +0,1,0,0

用class、屬性(如[id="btn1"])、偽類(如:hover) +0,0,1,0

元素和偽元素(如::before) 加0,0,0,1

結(jié)合符對(duì)特殊性沒(méi)有貢獻(xiàn),而通配符的貢獻(xiàn)是0,0,0,0.(所以他們對(duì)總特殊性沒(méi)有影響)

那么最前面的0呢?其實(shí)這個(gè)是留給內(nèi)聯(lián)樣式的的~所以內(nèi)聯(lián)樣式的特殊性最高,是1,0,0,0.

接下來(lái)我們?cè)倏磶讉€(gè)例子相信能更好地理解:

p{font-style: normal} /* 0,0,0,1 */
body div p{font-style:italic} /* 0,0,0,3 */(winner)

html > body table tr[id="totals"] td ul > li{color:maroon;} /* 0,0,1,7 */
li#answer {color: navy} /* 0,1,0,1 /* (winner)

我們注意到第二組盡管第一個(gè)的特殊性值的最后一part已經(jīng)達(dá)到了7，但是還是輸給了0,1,0,1.特殊性值并不是簡(jiǎn)單的進(jìn)制相加和比較,而是從左向右排序的,,只要前面比你大,不管后面你是7還是77,都比你特殊性高。如1,0,0,0大于0,10,0,0.

這是從網(wǎng)上找到的一張圖~很有意思.

最后一點(diǎn)則是重要聲明:

p.dark{color: #333 !important;}

重要聲明并沒(méi)有貢獻(xiàn)特殊性值,但是重要聲明總是會(huì)覆蓋非重要聲明,所以我們可以把重要聲明和非重要生命分為兩組，非重要聲明使用特殊性值來(lái)解決沖突，重要聲明的沖突會(huì)在重要聲明內(nèi)部解決.

繼承

繼承很簡(jiǎn)單,后代元素樣式會(huì)繼承父元素的樣式.
但是顯然邊框，盒子模型的外邊距、內(nèi)邊距等等都是不能繼承的。
繼承的值不貢獻(xiàn)特殊性,我們要注意這和0,0,0,0特殊性是有區(qū)別的.
0,0,0,0特殊性會(huì)優(yōu)先于無(wú)特殊性.

*{color: gray}
h1{color: black}


css specificity

em中的字體顏色會(huì)是灰色的,因?yàn)?特殊性比繼承值優(yōu)先級(jí)高.

層疊

CSS其實(shí)不就叫層疊樣式表嘛(cascading style sheet),所以層疊是CSS最核心的概念,而層疊其實(shí)就是結(jié)合我們前面所說(shuō)的特殊性和繼承做到的.
CSS的層疊規(guī)則如下:

找出所有相關(guān)的規(guī)則,這些規(guī)則都包含與一個(gè)給定元素匹配的選擇器。

按顯式權(quán)重對(duì)應(yīng)用到該元素的所有聲明排序2）按照顯式權(quán)重對(duì)應(yīng)用到該元素的所有聲明排序。標(biāo)志！important的規(guī)則的權(quán)重要高于沒(méi)有！important標(biāo)志的規(guī)則。按照來(lái)源對(duì)應(yīng)用到給定元素的所有聲明排序。共有3種來(lái)源，創(chuàng)作人員，讀者和用戶代理。正常情況下，創(chuàng)作人員 > 讀者模式 > 用戶代理的默認(rèn)樣式。

按照特殊性對(duì)應(yīng)用到給定元素的所有聲明排序。有較高特殊性的元素權(quán)重要大于有較低的特殊性的元素。

按照出現(xiàn)的順序應(yīng)用到給定元素的所有聲明排序。一個(gè)聲明在樣式表或文檔中越后出現(xiàn)，它的權(quán)重就越大。如果樣式表中右導(dǎo)入的樣式表，一般認(rèn)為出現(xiàn)在導(dǎo)入樣式表中的聲明在前，主樣式表中的所有聲明在后。

css權(quán)威指南balabala了這一大段,還是簡(jiǎn)單點(diǎn)來(lái)描述吧.

首先我們確定來(lái)源
讀者的重要聲明>創(chuàng)作人員的重要聲明>創(chuàng)作人員的正常聲明>讀者的正常聲明>用戶代理聲明.
(讀者的聲明就是用戶自定義的樣式,比如在設(shè)置中改變字體大小.)

然后再按特殊性排序,特殊性值高的優(yōu)先級(jí)高.

如果特殊性值還是一樣,那么后定義的規(guī)則優(yōu)先.

總結(jié)

在實(shí)際開發(fā)過(guò)程中,我們可能只需要知道內(nèi)聯(lián)樣式>id>class即可,如果特殊性相同,后定義的規(guī)則優(yōu)先.

參考書籍: 《CSS: The Definitive Guide》

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

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

相關(guān)文章

  • 帶你走進(jìn)CSS定位詳解

    摘要：相對(duì)于其最近的一個(gè)定位設(shè)置的父對(duì)象進(jìn)行絕對(duì)定位，可用。代碼基本語(yǔ)法默認(rèn)值，無(wú)特殊定位。代碼相對(duì)定位相對(duì)定位生成相對(duì)定位的元素，相對(duì)于其它位置進(jìn)行定位。結(jié)語(yǔ)結(jié)語(yǔ)帶你走進(jìn)定位詳解，多試試，熟能生巧嘛 學(xué)習(xí)CSS相關(guān)知識(shí)，定位是其中的重點(diǎn)，也是難點(diǎn)之一，如果不了解css定位有時(shí)候都不知道怎么用，下面整理了一下關(guān)于定位屬性的具體理解和應(yīng)用方案。 一：定位 定位屬性列表 position top...

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

  • 詳解 CSS 屬性 - 偽類和偽元素的區(qū)別

    摘要：之前寫了一篇詳解屬性的博文，當(dāng)時(shí)自己沒(méi)分清楚偽元素和偽類，所以在文章內(nèi)把概念混淆了，慶幸兄指正了我的錯(cuò)誤，所以今天打算好好研究下兩者的區(qū)別。偽元素用于將特殊的效果添加到某些選擇器。偽類種類偽元素種類區(qū)別這里用偽類和偽元素來(lái)進(jìn)行比較。 之前寫了一篇 《詳解 CSS 屬性 - :before && :after》 的博文，當(dāng)時(shí)自己沒(méi)分清楚偽元素和偽類，所以在文章內(nèi)把概念混淆了，慶幸 @ri...

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

  • 詳解 CSS 屬性 - 偽類和偽元素的區(qū)別

    摘要：之前寫了一篇詳解屬性的博文，當(dāng)時(shí)自己沒(méi)分清楚偽元素和偽類，所以在文章內(nèi)把概念混淆了，慶幸兄指正了我的錯(cuò)誤，所以今天打算好好研究下兩者的區(qū)別。偽元素用于將特殊的效果添加到某些選擇器。偽類種類偽元素種類區(qū)別這里用偽類和偽元素來(lái)進(jìn)行比較。 之前寫了一篇 《詳解 CSS 屬性 - :before && :after》 的博文，當(dāng)時(shí)自己沒(méi)分清楚偽元素和偽類，所以在文章內(nèi)把概念混淆了，慶幸 @ri...

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

  • 詳解 CSS 屬性 - 優(yōu)先級(jí)問(wèn)題

    摘要：當(dāng)你將一個(gè)樣式添加到元素上卻發(fā)現(xiàn)不起作用時(shí)，那就是遇到優(yōu)先級(jí)問(wèn)題了。那么應(yīng)該如何處理優(yōu)先級(jí)問(wèn)題呢，下面我總結(jié)了一些解決優(yōu)先級(jí)問(wèn)題的常用法則。如內(nèi)部樣式外部樣式內(nèi)聯(lián)樣式此時(shí)顯示的優(yōu)先級(jí)是。 當(dāng)你將一個(gè)樣式添加到元素上卻發(fā)現(xiàn)不起作用時(shí)，那就是遇到優(yōu)先級(jí)問(wèn)題了。那么應(yīng)該如何處理 CSS 優(yōu)先級(jí)問(wèn)題呢，下面我總結(jié)了一些解決 CSS 優(yōu)先級(jí)問(wèn)題的常用法則。 樣式距離 我們可以通過(guò)使用外部樣式...

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

  • CSS優(yōu)先級(jí)詳解

    摘要：優(yōu)先級(jí)是由選擇器組成的匹配規(guī)則決定的。這些繼承的樣式的優(yōu)先級(jí)永遠(yuǎn)低于元素本身的樣式，包括通用選擇器最終的顏色是紅色的。永遠(yuǎn)都要優(yōu)先考慮使用樣式規(guī)則的優(yōu)先級(jí)來(lái)解決問(wèn)題而不是。 概念 瀏覽器是通過(guò)判斷優(yōu)先級(jí)，來(lái)決定到底哪些屬性值是與元素最相關(guān)的，從而應(yīng)用到該元素上。優(yōu)先級(jí)是由選擇器組成的匹配規(guī)則決定的。 如何計(jì)算? 優(yōu)先級(jí)是根據(jù)由每種選擇器類型構(gòu)成的級(jí)聯(lián)字串計(jì)算而成的. 它不是一個(gè)對(duì)...

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

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

0條評(píng)論

閱讀需要支付1元查看
<