都有哪些CSS3選擇器類型?

猿友 2020-12-07 16:06:50 瀏覽數(shù) (5172)

反饋

什么是CSS3選擇器？它有哪些類型？都有什么作用呢？本文為您一一解答。

什么是CSS3選擇器？首先，要提到CSS3，它是最新的CSS標(biāo)準(zhǔn)，比CSS多了一些樣式設(shè)置。所以在CSS3選擇器上會(huì)有更多新內(nèi)容，讓你在網(wǎng)頁(yè)創(chuàng)作中更加便捷有效率。其中的選擇器用來(lái)針對(duì)元素進(jìn)行一對(duì)一，一對(duì)多，或者多對(duì)一的有效控制，用選擇器在相應(yīng)的元素中應(yīng)用樣式，對(duì)其元素進(jìn)行渲染，所以CSS3選擇器是非常重要、基礎(chǔ)的知識(shí)點(diǎn)。

CSS3選擇器有哪些類型？都有什么作用呢？如下圖，選擇器的種類豐富多樣，可以根據(jù)需求自行選擇最適合你的那一種。接下來(lái)全是重點(diǎn)，拿好小本本記下來(lái)。

微信截圖_20201207151224

以下就是各類選擇器屬性類型和作用，點(diǎn)擊選擇器即可前往教程學(xué)習(xí)詳細(xì)內(nèi)容，還可以在線編寫實(shí)例

1）基本選擇器

選擇器	類型	功能描述
*	通配選擇器	選擇文檔中所有HTML元素
E	元素選擇器	選擇指定類型的HTML元素
#id	ID選擇器	選擇指定ID屬性值為“id”的任意類型元素
.class	類選擇器	選擇指定class屬性值為“class”的任意類型的任意多個(gè)元素
selector1,selectorN	群組選擇器	將每一個(gè)選擇器匹配的元素集合并

2）層次選擇器

選擇器	類型	功能描述
E F	后代選擇器（包含選擇器）	選擇匹配的F元素，且匹配的F元素被包含在匹配的E元素內(nèi)
E>F	子選擇器	選擇匹配的F元素，且匹配的F元素所匹配的E元素的子元素
E+F	相鄰兄弟選擇器	選擇匹配的F元素，且匹配的F元素緊位于匹配的E元素的后面
E~F	通用選擇器	選擇匹配的F元素，且位于匹配的E元素后的所有匹配的F元素

3）動(dòng)態(tài)偽類選擇器

選擇器	類型	功能描述
E:link	鏈接偽類選擇器	選擇匹配的E元素，而且匹配元素被定義了超鏈接并未被訪問過。常用于鏈接描點(diǎn)上
E:visited	鏈接偽類選擇器	選擇匹配的E元素，而且匹配元素被定義了超鏈接并已被訪問過。常用于鏈接描點(diǎn)上
E:active	用戶行為選擇器	選擇匹配的E元素，且匹配元素被激活。常用于鏈接描點(diǎn)和按鈕上
E:hover	用戶行為選擇器	選擇匹配的E元素，且用戶鼠標(biāo)停留在元素E上。IE6及以下瀏覽器僅支持a:hover
E:focus	用戶行為選擇器	選擇匹配的E元素，而且匹配元素獲取焦點(diǎn)

4）目標(biāo)偽類選擇器

選擇器	功能描述
E:target	選擇匹配E的所有元素，且匹配元素被相關(guān)URL指向

5）語(yǔ)言偽類選擇器

選擇器	功能描述
E::lang(language)	表示選擇匹配E的所有元素，且匹配元素指定了lang屬性，而且其值為language

6）UI元素狀態(tài)偽類選擇器

選擇器	類型	功能描述
E:checked	選中狀態(tài)偽類選擇器	匹配選中的復(fù)選按鈕或者單選按鈕表單元素
E:enabled	啟用狀態(tài)偽類選擇器	匹配所有啟用的表單元素
E:disabled	不可用狀態(tài)偽類選擇器	匹配所有禁用的表單元素

7）結(jié)構(gòu)偽類選擇器

選擇器	功能描述
E:first-child	作為父元素的第一個(gè)子元素的元素E。與E:nth-child(1)等同
E:last-child	作為父元素的最后一個(gè)子元素的元素E。與E:nth-last-child(1)等同
E:root	選擇匹配元素E所在文檔的根元素。在HTML文檔中，根元素始終是html，此時(shí)該選擇器與html類型選擇器匹配的內(nèi)容相同
E F:nth-child(n)	選擇父元素E的第n個(gè)子元素F。其中n可以是整數(shù)（1，2，3）、關(guān)鍵字（even，odd）、可以是公式（2n+1）,而且n值起始值為1，而不是0.
E F:nth-last-child(n)	選擇父元素E的倒數(shù)第n個(gè)子元素F。此選擇器與E:nth-child(n)選擇器計(jì)算順序剛好相反，但使用方法都是一樣的，其中：nth-last-child(1)始終匹配最后一個(gè)元素，與last-child等同
E:nth-of-type(n)	選擇父元素內(nèi)具有指定類型的第n個(gè)E元素
E:nth-last-of-type(n)	選擇父元素內(nèi)具有指定類型的倒數(shù)第n個(gè)E元素
E:first-of-type	選擇父元素內(nèi)具有指定類型的第一個(gè)E元素，與E:nth-of-type(1)等同
E:last-of-type	選擇父元素內(nèi)具有指定類型的最后一個(gè)E元素，與E:nth-last-of-type(1)等同
E:only-child	選擇父元素只包含一個(gè)子元素，且該子元素匹配E元素
E:only-of-type	選擇父元素只包含一個(gè)同類型子元素，且該子元素匹配E元素
E:empty	選擇沒有子元素的元素，而且該元素也不包含任何文本節(jié)點(diǎn)

8）否定偽類選擇器

選擇器	功能描述
E:not(F)	匹配所有除元素F外的E元素

9）屬性選擇器

選擇器	功能描述
[attribute]	用于選取帶有指定屬性的元素。
[attribute=value]	用于選取帶有指定屬性和值的元素。
[attribute~=value]	用于選取屬性值中包含指定詞匯的元素。
[attribute\|=value]	用于選取帶有以指定值開頭的屬性值的元素，該值必須是整個(gè)單詞。
[attribute^=value]	匹配屬性值以指定值開頭的每個(gè)元素。
[attribute$=value]	匹配屬性值以指定值結(jié)尾的每個(gè)元素。
[attribute=value*]	匹配屬性值中包含指定值的每個(gè)元素。

更多偽類選擇器可以點(diǎn)擊CSS選擇器查看

推薦相關(guān)精選視頻：CSS3入門與實(shí)戰(zhàn)，HTML5+CSS3零基礎(chǔ)快速入門

HTML CSS 前端

0 人點(diǎn)贊