成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

CSS選擇器

張金寶 / 2057人閱讀

摘要：基本選擇器選擇器含義版本優(yōu)先級(jí)通用元素選擇器匹配任何元素標(biāo)簽元素選擇器匹配所有使用標(biāo)簽的元素選擇器匹配所有屬性中包含的元素選擇器匹配所有屬性中等于的元素其中中的第一位表示是否是內(nèi)聯(lián)的意思是則為不是為多元素的選擇器組合選擇器含義版本優(yōu)先級(jí)群組

基本選擇器
選擇器 含義 CSS版本 優(yōu)先級(jí)
* 通用元素選擇器,匹配任何元素 2 0,0,0,0
E 標(biāo)簽(元素)選擇器,匹配所有使用E標(biāo)簽的元素 1 0,0,0,1
.class1 class選擇器,匹配所有class屬性中包含class1的元素 1 0,0,1,0
#id1 id選擇器,匹配所有id屬性中等于id1的元素 1 0,1,0,0

其中,0,1,0,0中的第一位表示是否是內(nèi)聯(lián)的意思,是則為1,不是為0

多元素的選擇器組合
選擇器 含義 CSS版本 優(yōu)先級(jí)
E,F 群組選擇器,同時(shí)匹配E,F元素,元素之間用,隔開(kāi) 1 權(quán)重相加
E F 后代元素選擇器,匹配所有屬于E元素后代的F元素,元素之間用空格隔開(kāi) 1 權(quán)重相加
E>F 子元素選擇器,匹配所有E元素的子元素F 2 權(quán)重相加
E+F 相鄰?fù)x擇器,匹配所有緊隨E元素之后的同級(jí)F元素 2 權(quán)重相加
E~F 同級(jí)元素通用選擇器,匹配任何在E元素之后的同級(jí)F元素 3 權(quán)重相加
屬性選擇器
選擇器 含義 CSS版本 優(yōu)先級(jí)
E[attr] 匹配所有具有attr屬性的E元素 2 0,0,1,0
E[attr=val] 匹配所有attr屬性等于"val"的E元素 2 0,0,1,0
E[attr~=val] 匹配所有attr屬性具有多個(gè)空格分隔的值,其中一個(gè)值等于"val"的E元素 2 0,0,1,0
E[attr|=val] 匹配所有attr屬性具有多個(gè)連字號(hào)(-)分隔的值,其中一個(gè)值以"val"開(kāi)頭的E元素 2 0,0,1,0
E[attr^="val"] 屬性attr的值以"val"開(kāi)頭的元素 3 0,0,1,0
E[attr$="val"] 屬性attr的值以"val"結(jié)尾的元素 3 0,0,1,0
E[attr*="val"] 屬性attr的值包含"val"字符串的元素 3 0,0,1,0
偽類(lèi)選擇器
選擇器 含義 CSS版本 優(yōu)先級(jí)
E:link 匹配所有未被點(diǎn)擊的鏈接 1 0,0,1,0
E:visited 匹配所有已被點(diǎn)擊的鏈接 1 0,0,1,0
E:active] 匹配鼠標(biāo)已經(jīng)激活還沒(méi)有釋放的E元素 1 0,0,1,0
E:hover 匹配鼠標(biāo)懸停其上的E元素 1 0,0,1,0
E:lang(language) 匹配lang屬性等于language 2 0,0,1,0
E:focus 匹配獲得當(dāng)前焦點(diǎn)的E元素 2 0,0,1,0
E:first-child 匹配父元素的第一個(gè)子元素 2 0,0,1,0

CSS3中偽類(lèi),比如:hover寫(xiě)為::hover,這是為了與偽元素作區(qū)分,為了支持舊版的網(wǎng)站,以前的單引號(hào)偽類(lèi)還有效

與用戶(hù)界面有關(guān)的偽類(lèi)
選擇器 含義 CSS版本 優(yōu)先級(jí)
E:enabled 匹配表單中激活的元素 3 0,0,1,0
E:disabled 匹配表單中禁用的元素 3 0,0,1,0
E:checked 匹配獲得當(dāng)前焦 3 0,0,1,0
結(jié)構(gòu)性偽類(lèi)
選擇器 含義 CSS版本 優(yōu)先級(jí)
E:root 匹配文檔的根元素,對(duì)于HTML文檔,就是HTML元素 3 0,0,1,0
E:nth-child(n) 匹配其父元素的第n個(gè)子元素,第一個(gè)編號(hào)為1 3 0,0,1,0
E:nth-last-child(n) 匹配其父元素的倒數(shù)第n個(gè)子元素,第一個(gè)編號(hào)為1 3 0,0,1,0
E:nth-of-type(n) 與:nth-child()作用類(lèi)似,但是僅匹配使用同種標(biāo)簽的元素 3 0,0,1,0
E:nth-last-of-type(n) 與:nth-last()作用類(lèi)似,但是僅匹配使用相同標(biāo)簽的元素 3 0,0,1,0
E:last-child 匹配父元素的最后一個(gè)子元素,等同于:nth-last-child(1) 3 0,0,1,0
E:first-of-type 匹配父元素下使用同種標(biāo)簽的第一個(gè)子元素,等同于:nth-of-type(1) 3 0,0,1,0
E:last-of-type 匹配父元素下使用同種元素的最后一個(gè)子元素,等同于:nth-last-of-type(1) 3 0,0,1,0
E:only-child 匹配父元素下僅有的一個(gè)子元素,等同于:first-child:last-child或:nth-child(1):nth-last-child(1) 3 0,0,1,0
E:only-of-type 匹配父元素下使用同種標(biāo)簽的唯一一個(gè)子元素,等同于:first-of-type:last-of-type或:nth-of-type(1):nth-last-of-type(1) 3 0,0,1,0
E:empty 匹配一個(gè)不包含任何子元素的元素,注意,文本借點(diǎn)也被看作子元素 3 0,0,1,0
反選偽類(lèi)
選擇器 含義 CSS版本 優(yōu)先級(jí)
E:not(selector) 匹配非當(dāng)前選擇起的任何元素 3 0,0,0,0
target偽類(lèi)
選擇器 含義 CSS版本 優(yōu)先級(jí)
E:target 匹配文檔中特定"id"點(diǎn)擊后的效果 3 0,0,1,0
偽元素
選擇器 含義 CSS版本 優(yōu)先級(jí)
E:first-line 匹配E元素的第一行 2 0,0,0,1
E:first-letter 匹配E元素的第一個(gè)字母 2 0,0,0,1
E:before 在E元素之前插入生成的內(nèi)容 2 0,0,0,1
E:after 在E元素之后插入生成的內(nèi)容 2 0,0,0,1
E::selection 匹配用戶(hù)當(dāng)前選中的元素 3 0,0,0,1
E::placeholder 控制表單輸入框占位符的外觀,瀏覽器暫時(shí)不支持 3 0,0,0,1
Selectors Level 4

暫略

Selectors Level 4
Selectors Level 4草案
CSS4 Rocks

CSS選擇器,優(yōu)先級(jí)與匹配原理

瀏覽器通過(guò)優(yōu)先級(jí)來(lái)判斷哪一些屬性應(yīng)該應(yīng)用到一個(gè)元素上.優(yōu)先級(jí)就是分配給指定的CSS聲明的一個(gè)權(quán)重,它由匹配的選擇器中的每一個(gè)選擇器類(lèi)型的值來(lái)決定.

選擇器的權(quán)重(特殊性)升序排列:

繼承

通用元素

標(biāo)簽|偽元素

類(lèi)|屬性|偽類(lèi)

ID

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

!important

所有的選擇器權(quán)重都是通過(guò)相加計(jì)算,大的優(yōu)先;如果權(quán)重一樣大,后定義的優(yōu)先.

此外,優(yōu)先級(jí)還要考慮到CSS樣式的來(lái)源,樣式表可能有三種不同的來(lái)源:作者,用戶(hù)和客戶(hù)端,按升序排列:

客戶(hù)端聲明(UA declarations)

一般用戶(hù)聲明(user normal declarations)

一般作者聲明( author normal declarations )

加了 "!important" 的作者聲明( author important declarations )

加了 "!important" 的用戶(hù)聲明( user important declarations )

當(dāng)擁有相同重要性和來(lái)源,按照CSS特殊性來(lái)排序.引用的樣式表(@import )中的規(guī)則被認(rèn)為出現(xiàn)在樣式表本身的所有規(guī)則之前,在@charset之后
!important

使用!important可以覆蓋任何其它沒(méi)有使用!important的規(guī)則,在IE6時(shí)代!important多用來(lái)hack,不過(guò)現(xiàn)在不建議使用,除非需要在外部css文件中提升優(yōu)先級(jí)

一些Demo :not反轉(zhuǎn)偽類(lèi)

:notDemo

這里明顯可以看出,:not不參與權(quán)重計(jì)算

基于形式的優(yōu)先級(jí)

選擇器的形式

由此可見(jiàn),屬性選擇器里面的選擇器不參與權(quán)重計(jì)算,它的權(quán)重只是屬性選擇器的權(quán)重

關(guān)于后代元素選擇器

后代元素選擇器

對(duì)于后代元素選擇器來(lái)說(shuō),祖先選擇器跟每個(gè)后代元素的距離都是一樣的.在這個(gè)例子中,由于優(yōu)先級(jí)一樣,所以后面的.red p覆蓋前面的.green p

覆蓋之前:

1.顏色是? 綠色
2.顏色是? 紅色
3.顏色是? 紅色
4.顏色是? 綠色

覆蓋之后:

1.顏色是? 紅色
2.顏色是? 紅色
3.顏色是? 紅色
4.顏色是? 綠色

相關(guān)參考:
優(yōu)先級(jí)
KB005: CSS 層疊

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/116437.html

相關(guān)文章

  • WEB前端 CSS

    摘要：后代選擇器，兒子選擇器，毗鄰選擇器，弟弟選擇器。后代選擇器后代選擇器標(biāo)簽選擇器后跟標(biāo)簽后代，無(wú)論直屬還是間接直屬，直接后代毗鄰后代中最近的一個(gè)弟弟，找到和自己同級(jí)的標(biāo)簽如通過(guò)多個(gè)選擇器好到具體的標(biāo)簽。目錄 WEB前端 CSS WEB前端 CSS TOC CSS簡(jiǎn)介 CSS引入方式 CSS結(jié)構(gòu) CSS選擇器 標(biāo)簽選擇...

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

  • 編寫(xiě)高效的 CSS 選擇器 – CSS魔法

    摘要：最基本的選擇器是元素選擇器比如選擇器比如還有類(lèi)選擇器比如。選擇器和類(lèi)選擇器在速度上的差異基本上沒(méi)有關(guān)系?，F(xiàn)在我們回到討論開(kāi)始的地方，哪類(lèi)選擇器是最高效的哪個(gè)是會(huì)影響選擇器效率的關(guān)鍵選擇器寫(xiě)代碼的時(shí)候，關(guān)鍵選擇器是能否高效的決定因素。 高效的CSS已經(jīng)不是一個(gè)新的話(huà)題了，也不是我一個(gè)非得重拾的話(huà)題，但它卻是我在工作之時(shí)，所感興趣的，關(guān)注已久的話(huà)題。 有很多人都忘記了，或在簡(jiǎn)單的說(shuō)沒(méi)有意識(shí)...

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

  • 編寫(xiě)高效的 CSS 選擇器 – CSS魔法

    摘要：最基本的選擇器是元素選擇器比如選擇器比如還有類(lèi)選擇器比如。選擇器和類(lèi)選擇器在速度上的差異基本上沒(méi)有關(guān)系?，F(xiàn)在我們回到討論開(kāi)始的地方，哪類(lèi)選擇器是最高效的哪個(gè)是會(huì)影響選擇器效率的關(guān)鍵選擇器寫(xiě)代碼的時(shí)候，關(guān)鍵選擇器是能否高效的決定因素。 高效的CSS已經(jīng)不是一個(gè)新的話(huà)題了，也不是我一個(gè)非得重拾的話(huà)題，但它卻是我在工作之時(shí)，所感興趣的，關(guān)注已久的話(huà)題。 有很多人都忘記了，或在簡(jiǎn)單的說(shuō)沒(méi)有意識(shí)...

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

  • 前端面試題-CSS選擇器性能優(yōu)化

    摘要：不要在編寫(xiě)規(guī)則時(shí)用標(biāo)簽名或類(lèi)名不要在編寫(xiě)規(guī)則時(shí)用標(biāo)簽名把多層標(biāo)簽選擇規(guī)則用規(guī)則替換，減少查找避免使用子選擇器后代選擇器在中是最昂貴的選擇器。如果你關(guān)心頁(yè)面性能的話(huà)，他們真不該被使用擴(kuò)展閱讀前端面試題選擇器前端面試題優(yōu)先級(jí) 一、CSS選擇符 CSS選擇符由一些初始化參數(shù)組成，這些參數(shù)指明了要應(yīng)用這個(gè)CSS規(guī)則的頁(yè)面元素。 作為一個(gè)網(wǎng)站的前端開(kāi)發(fā)工程師，應(yīng)該避免編寫(xiě)一些常見(jiàn)的開(kāi)銷(xiāo)很大的CS...

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

  • 前端面試題-CSS選擇器性能優(yōu)化

    摘要：不要在編寫(xiě)規(guī)則時(shí)用標(biāo)簽名或類(lèi)名不要在編寫(xiě)規(guī)則時(shí)用標(biāo)簽名把多層標(biāo)簽選擇規(guī)則用規(guī)則替換，減少查找避免使用子選擇器后代選擇器在中是最昂貴的選擇器。如果你關(guān)心頁(yè)面性能的話(huà)，他們真不該被使用擴(kuò)展閱讀前端面試題選擇器前端面試題優(yōu)先級(jí) 一、CSS選擇符 CSS選擇符由一些初始化參數(shù)組成，這些參數(shù)指明了要應(yīng)用這個(gè)CSS規(guī)則的頁(yè)面元素。 作為一個(gè)網(wǎng)站的前端開(kāi)發(fā)工程師，應(yīng)該避免編寫(xiě)一些常見(jiàn)的開(kāi)銷(xiāo)很大的CS...

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

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

0條評(píng)論

張金寶

男|高級(jí)講師

TA的文章

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