CSS3新增了哪些選擇器-創(chuàng)新互聯(lián)

這篇文章主要介紹“CSS3新增了哪些選擇器”，在日常操作中，相信很多人在CSS3新增了哪些選擇器問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對(duì)大家解答”CSS3新增了哪些選擇器”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！

創(chuàng)新互聯(lián)公司服務(wù)緊隨時(shí)代發(fā)展步伐，進(jìn)行技術(shù)革新和技術(shù)進(jìn)步，經(jīng)過10年的發(fā)展和積累，已經(jīng)匯集了一批資深網(wǎng)站策劃師、設(shè)計(jì)師、專業(yè)的網(wǎng)站實(shí)施團(tuán)隊(duì)以及高素質(zhì)售后服務(wù)人員，并且完全形成了一套成熟的業(yè)務(wù)流程，能夠完全依照客戶要求對(duì)網(wǎng)站進(jìn)行網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站建設(shè)、建設(shè)、維護(hù)、更新和改版，實(shí)現(xiàn)客戶網(wǎng)站對(duì)外宣傳展示的首要目的，并為客戶企業(yè)品牌互聯(lián)網(wǎng)化提供全面的解決方案。

1、 屬性選擇器

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

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

(1)E[att^=value]

例如： div[id^=section]

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

(2)E[att$=value]

例如： div[id$=section]

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

(3)E[att*=value]

例如： div[id*=section]

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

2、關(guān)系選擇器

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

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

例如： h2>strong

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

(2)臨近兄弟選擇器

例如： h3+p

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

(3)普通兄弟選擇器

例如：p~h3

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

3、結(jié)構(gòu)化偽類選擇器

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

:root

用于匹配文檔根標(biāo)記，使用“:root選擇器”定義的樣式，對(duì)所有頁面標(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)，也就是說某個(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

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

4、偽元素選擇器

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

需要注意的是，標(biāo)記與偽元素名之間不要有空格，偽元素選擇器常見有: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)容即可。其基本語法格式如下

p: after{content: url();}

到此，關(guān)于“CSS3新增了哪些選擇器”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！

當(dāng)前文章：CSS3新增了哪些選擇器-創(chuàng)新互聯(lián)
路徑分享：http://bm7419.com/article2/djphic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、品牌網(wǎng)站建設(shè)、網(wǎng)站營銷、域名注冊(cè)、營銷型網(wǎng)站建設(shè)、全網(wǎng)營銷推廣

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)