更新時(shí)間:2019-11-26 來(lái)源:黑馬程序員 瀏覽量:
CSS3是CSS的最新版本,在CSS3中增加了許多新的選擇器。運(yùn)用這些選擇器可以簡(jiǎn)網(wǎng)頁(yè)代碼的書寫,讓穩(wěn)當(dāng)?shù)慕Y(jié)構(gòu)更加簡(jiǎn)單。CSS3新增的選擇器主要分為屬性選擇器、關(guān)系選擇器、結(jié)構(gòu)化偽類選擇器、偽元素選擇器4類,具體介紹如下。
1、 屬性選擇器
屬性選擇器可以根據(jù)網(wǎng)頁(yè)標(biāo)記的屬性及屬性值來(lái)選擇標(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]
說(shuō)明:表示匹配包含id屬性,且id屬性值是以“section”字符串開頭的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”字符串開頭的div標(biāo)記。
2、關(guān)系選擇器
CSS3中的關(guān)系選擇器主要包括子代選擇器和兄弟選擇器,其中子代選擇器由符號(hào)連接,兄弟選擇器由符號(hào)“+”和“~”連接,具體如下所示。
(1)關(guān)系選擇器
例如: h1>strong
說(shuō)明:表示選擇嵌套在h1標(biāo)記的子標(biāo)記strong。
(2)臨近兄弟選擇器
例如: h2+p
說(shuō)明:表示選擇h2標(biāo)記后緊鄰的第一個(gè)兄弟標(biāo)記p。
(3)普通兄弟選擇器
例如:p~h2
說(shuō)明:表示選擇p標(biāo)記所有的h2兄弟標(biāo)記。
3、結(jié)構(gòu)化偽類選擇器
結(jié)構(gòu)化偽類選擇器可以減少文檔內(nèi)class屬性和id屬性的定義,使文檔變得更加簡(jiǎn)潔。下面列舉了常用的結(jié)構(gòu)化偽類選擇器。
:root
用于匹配文檔根標(biāo)記,使用“:root選擇器”定義的樣式,對(duì)所有頁(yè)面標(biāo)記都生效。
:not
例如:body*:not(h2)
用于排除body結(jié)構(gòu)中的子結(jié)構(gòu)標(biāo)記h2。
: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)
例如:h2:nth-of-type(odd)
表示用于選擇所有h2標(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)記。
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)容即可。其基本語(yǔ)法格式如下
p: after{content: url(); }
猜你喜歡: