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

鄒強(qiáng) 發(fā)布于2019-08-30 14:01 / 1547人閱讀

摘要：選擇器的權(quán)重第一種情況樣式表中只有單一樣式即內(nèi)聯(lián)元素第二種情況組合選擇器從左往右逐個(gè)比較，按進(jìn)行比較越大權(quán)重越高。

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

1第一種情況：
樣式表中只有單一樣式：
即內(nèi)聯(lián)>id>class>元素
#id{} .class{} p{}

2第二種情況：
組合選擇器
從左往右逐個(gè)比較，按a,b,c,d 進(jìn)行比較越大權(quán)重越高。
權(quán)限值生成方法
按權(quán)重由高到低書寫,不按選擇器的順序?qū)?br> eg:

/*bbc  */
#dii .dd #ip{
  color: palevioletred;
}

/*bcc  */
#dii .dd .cp{
  color: paleturquoise
}

/*bbb  */
#dii>#idd>#ip{
  color: yellowgreen;
}

這個(gè)里面權(quán)重順序 bbb>bbc>bcc
3 單個(gè)和組合混淆
eg:

/*bcc  */
#dii .dd .cp{
  color: paleturquoise
}

/*bbc  */
#dii .dd #ip{
  color: palevioletred;
}

/*bbb  */
#dii>#idd>#ip{
  color: yellowgreen;
} 
-------------------------------------
單個(gè)
/*b  */
#ip{
  color: cyan;
}

權(quán)重順序  bbb>bbc>bcc>b

總結(jié)：

 權(quán)重值從左往右逐個(gè)比較，如第一個(gè)位置與另一組的第一個(gè)比較，有大小權(quán)重關(guān)系就不在比較后面的，如相等
繼續(xù)比較后面的，如果是比較的組合一個(gè)有值另一個(gè)沒(méi)值，有值權(quán)重更高。

GPU云服務(wù)器云服務(wù)器服器的負(fù)載均衡 java終結(jié)器的作用服務(wù)器管理器的使用評(píng)價(jià)器的服務(wù)器安裝在云上

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/115712.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ù)位之間沒(méi)有進(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 2019-04-23 13:28 評(píng)論0 收藏0
CSS選擇器總結(jié)（分類、優(yōu)先級(jí)）

摘要：樣式選擇器權(quán)重優(yōu)先級(jí)如下的權(quán)重為選擇器的權(quán)重為類選擇器的權(quán)重為偽類選擇器的權(quán)重為屬性選擇器的權(quán)重為標(biāo)簽選擇器的權(quán)重為偽元素選擇器的權(quán)重為通配符的權(quán)重為綜合上述權(quán)重優(yōu)先級(jí)來(lái)看，正確的優(yōu)先級(jí)排序應(yīng)該是內(nèi)聯(lián)樣式類偽類屬性選擇標(biāo)簽偽元素繼承通配符 CSS選擇器是編寫CSS代碼時(shí)的一個(gè)核心概念，選擇器定義了相應(yīng)的樣式將會(huì)影響到文檔中的哪些部分，以下是自己在學(xué)習(xí)及工作過(guò)程中對(duì)CSS選擇器的一些總結(jié)...

hedge_hog 2019-08-29 12:22 評(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 2019-08-01 17:17 評(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 2019-08-29 13:04 評(píng)論0 收藏0
前端雜談: CSS 權(quán)重 (Specificity)

摘要：前端雜談權(quán)重權(quán)重想必大家都聽(tīng)說(shuō)過(guò)一些簡(jiǎn)單的規(guī)則大部分人也都知道較長(zhǎng)的權(quán)重會(huì)大于較短的權(quán)重高于但是具體規(guī)范是什么瀏覽器是按照什么標(biāo)準(zhǔn)來(lái)判定不同選擇器的權(quán)重的呢讓我們來(lái)看一下官方文檔是怎么說(shuō)的第一個(gè)關(guān)鍵詞官方文檔中用特異性來(lái)表示一個(gè)和其元素的相前端雜談: CSS 權(quán)重 (Specificity) css 權(quán)重想必大家都聽(tīng)說(shuō)過(guò), 一些簡(jiǎn)單的規(guī)則大部分人也都知道: 較長(zhǎng)的 css sele...

SimonMa 2019-08-29 17:18 評(píng)論0 收藏0