這篇文章主要講解了“css3常見(jiàn)的屬性選擇器有哪些及如何使用”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“css3常見(jiàn)的屬性選擇器有哪些及如何使用”吧！

創(chuàng)新互聯(lián)建站堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都做網(wǎng)站、網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的個(gè)舊網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

CSS3新增的選擇器主要分為屬性選擇器、關(guān)系選擇器、結(jié)構(gòu)化偽類(lèi)選擇器、偽元素選擇器4類(lèi)，具體介紹如下。

屬性選擇器可以根據(jù)網(wǎng)頁(yè)標(biāo)記的屬性及屬性值來(lái)選擇標(biāo)記。屬性選擇器一般是一個(gè)記后緊跟中括號(hào)“[]”，中括號(hào)內(nèi)部是屬性或者屬性表達(dá)式，如下所示：

CSS3中常見(jiàn)的屬性選擇器主要包括E[att^=value]、E[att$=value]和E[att*=value]這三種性選擇器，具體如下所示：

（1）E[att^=value]

例如： div[id^=section]

說(shuō)明：表示匹配包含id屬性，且id屬性值是以“section”字符串開(kāi)頭的div標(biāo)記。

（2）E[att$=value]

例如： div[id$=section]

說(shuō)明：表示匹配包含id屬性，且id屬性值是以“section”字符串結(jié)尾的div標(biāo)記

（3）E[att*=value]

例如： div[id*=section]

說(shuō)明：表示匹配包含id屬性，且id屬性值包含“section”字符串開(kāi)頭的div標(biāo)記。

CSS3中的關(guān)系選擇器主要包括子代選擇器和兄弟選擇器，其中子代選擇器由符號(hào)連接，兄弟選擇器由符號(hào)“+”和“~”連接，具體如下所示。

（1）關(guān)系選擇器

例如： h2>strong

說(shuō)明：表示選擇嵌套在h2標(biāo)記的子標(biāo)記strong。

（2）臨近兄弟選擇器

例如： h3+p

說(shuō)明：表示選擇h3標(biāo)記后緊鄰的第一個(gè)兄弟標(biāo)記p。

（3）普通兄弟選擇器

例如：p~h3

說(shuō)明：表示選擇p標(biāo)記所有的h3兄弟標(biāo)記。

結(jié)構(gòu)化偽類(lèi)選擇器可以減少文檔內(nèi)class屬性和id屬性的定義，使文檔變得更加簡(jiǎn)潔。下面列舉了常用的結(jié)構(gòu)化偽類(lèi)選擇器。

:root

用于匹配文檔根標(biāo)記，使用“:root選擇器”定義的樣式，對(duì)所有頁(yè)面標(biāo)記都生效。

:not

例如：body*:not(h3)

用于排除body結(jié)構(gòu)中的子結(jié)構(gòu)標(biāo)記h3。

:only-child

例如：li:only-child

用于匹配屬于某父標(biāo)記的唯一子標(biāo)記(li)，也就是說(shuō)某個(gè)父標(biāo)記僅有一個(gè)子標(biāo)記（li）。

:first=child

用于選擇父元素第一個(gè)子標(biāo)記。

:last-child

用于選擇父元素最后一個(gè)子標(biāo)記。

:nth-child(n)

例如：p:nth-child(2)

表示用于選擇父元素第二個(gè)p標(biāo)記。

:nth-last-child(n)

例如：p:nth-last-child(2)

用于表示父元素倒數(shù)第二個(gè)p標(biāo)記。

:nth-of-type(n)

例如：h3:nth-of-type(odd)

表示用于選擇所有h3標(biāo)記中位于奇數(shù)行數(shù)的標(biāo)記。

:nth-last-of-type(2)

例如：p:nth-last-of-type(2)

表示用于選擇倒數(shù)第二個(gè)p標(biāo)記。

:empty

用于選擇沒(méi)有子標(biāo)記或者文本內(nèi)容為空的所有標(biāo)記。

偽元素選擇器一般是一個(gè)標(biāo)記后面緊跟英文冒號(hào)“:”，英文冒號(hào)后是偽元素名，如下所示。

要注意的是，標(biāo)記與偽元素名之間不要有空格，偽元素選擇器常見(jiàn)有:before選擇器和:after選擇器。

:before

例如： p:before

表示：表示在p標(biāo)記的內(nèi)容前面插入內(nèi)容。

:after

例如： p:after

表示: 表示在p標(biāo)記的內(nèi)容后面插入內(nèi)容。

需要注意的是，如果想要在文本后面添加是圖片，只需更改content屬性后的內(nèi)容即可。其基本語(yǔ)法格式如下

p: after{content: url(); }

感謝各位的閱讀，以上就是“css3常見(jiàn)的屬性選擇器有哪些及如何使用”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)css3常見(jiàn)的屬性選擇器有哪些及如何使用這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！