CSS選擇器

ispring 發(fā)布于2019-08-30 15:53 / 809人閱讀

摘要：偽類選擇器匹配在文檔樹中前面有個(gè)兄弟元素的元素，此時(shí)大于或等于，并且該元素具有父元素。簡(jiǎn)而言之，該選擇器匹配多個(gè)位置滿足的子元素。

偽類選擇器 ：nth-child & :nth-of-type

nth-child(an+b)匹配在文檔樹中前面有an+b-1個(gè) 兄弟元素 的元素，此時(shí)n大于或等于0，并且該元素具有父元素。簡(jiǎn)而言之，該選擇器匹配多個(gè)位置滿足an+b的子元素。

:nth-of-type(an+b) 匹配在文檔樹中第an+b個(gè)元素，該元素前面有an+b-1個(gè) 相同標(biāo)簽名的兄弟元素 ，此時(shí)n大于或等于0，并且該元素具有父元素。

//css
p:nth-child(2){
  color:red;
}
div:nth-of-type(2){
  color:red;
}

//html

    p1
    div1
    p2
    div2


//result:只有 div2 是紅色

:empty

:empty 偽類代表沒有子元素的元素。這里說的子元素，只計(jì)算元素結(jié)點(diǎn)及文本（包括空格），注釋、運(yùn)行指令不考慮在內(nèi)。

:target

:target 代表一個(gè)特殊的元素，它的id是URI的片段標(biāo)識(shí)符

//html
a
b
a
b

//css
:target { color:red; }

//result:點(diǎn)擊鏈接，應(yīng)用樣式于錨對(duì)應(yīng)id的元素

:enabled

:enabled 表示任何啟用的（enabled）元素。如果一個(gè)元素 能夠被激活 （如選擇、點(diǎn)擊或接受文本輸入）或獲取焦點(diǎn)，則該元素是啟用的。元素還有一個(gè)禁用的狀態(tài)（disabled state），在被禁用時(shí)，元素不能被激活或獲取焦點(diǎn)。

基于關(guān)系的選擇器

選擇器	選擇的元素
A E	元素A的任一后代元素E (后代節(jié)點(diǎn)指A的子節(jié)點(diǎn)，子節(jié)點(diǎn)的子節(jié)點(diǎn)，以此類推)
A > E	元素A的任一子元素E(也就是直系后代)
E:first-child	任一是其父母結(jié)點(diǎn)的第一個(gè)子節(jié)點(diǎn)的元素E
B + E	元素B的任一下一個(gè)兄弟元素E
B ~ E	B元素后面的擁有共同父元素的兄弟元素E

GPU云服務(wù)器云服務(wù)器 css選擇器基礎(chǔ)選擇器css css選擇 js css 加載器

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

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

相關(guān)文章

WEB前端 CSS

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

darry 2019-04-23 13:34 評(píng)論0 收藏0
編寫高效的 CSS 選擇器 – CSS魔法

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

forrest23 2019-08-02 16:16 評(píng)論0 收藏0
編寫高效的 CSS 選擇器 – CSS魔法

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

hyuan 2019-08-30 10:50 評(píng)論0 收藏0
前端面試題-CSS選擇器性能優(yōu)化

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

Scott 2019-08-30 14:08 評(píng)論0 收藏0
前端面試題-CSS選擇器性能優(yōu)化

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

XGBCCC 2019-08-01 18:42 評(píng)論0 收藏0