首頁技術文章正文

css3選擇器用法介紹[web前端培訓]

更新時間:2019-11-26 來源:黑馬程序員 瀏覽量:

CSS3是CSS的最新版本,在CSS3中增加了許多新的選擇器。運用這些選擇器可以簡網(wǎng)頁代碼的書寫,讓穩(wěn)當?shù)慕Y構更加簡單。CSS3新增的選擇器主要分為屬性選擇器、關系選擇器、結構化偽類選擇器、偽元素選擇器4類,具體介紹如下。

 

1、  屬性選擇器

屬性選擇器可以根據(jù)網(wǎng)頁標記的屬性及屬性值來選擇標記。屬性選擇器一般是一個記后緊跟中括號“[]”,中括號內部是屬性或者屬性表達式,如下所示:

1574752151521_CSS3新增標記.jpg


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

(1)E[att^=value]

例如: div[id^=section]

說明:表示匹配包含id屬性,且id屬性值是以“section”字符串開頭的div標記。

 

(2)E[att$=value]

例如: div[id$=section]

說明:表示匹配包含id屬性,且id屬性值是以“section”字符串結尾的div標記

 

(3)E[att*=value]

例如: div[id*=section]

說明:表示匹配包含id屬性,且id屬性值包含“section”字符串開頭的div標記。

 

2、關系選擇器

CSS3中的關系選擇器主要包括子代選擇器和兄弟選擇器,其中子代選擇器由符號連接,兄弟選擇器由符號“+”和“~”連接,具體如下所示。

(1)關系選擇器

例如: h1>strong

說明:表示選擇嵌套在h1標記的子標記strong。

 

(2)臨近兄弟選擇器

例如: h2+p

說明:表示選擇h2標記后緊鄰的第一個兄弟標記p。

 

(3)普通兄弟選擇器

例如:p~h2

說明:表示選擇p標記所有的h2兄弟標記。

 

3、結構化偽類選擇器

結構化偽類選擇器可以減少文檔內class屬性和id屬性的定義,使文檔變得更加簡潔。下面列舉了常用的結構化偽類選擇器。

:root

用于匹配文檔根標記,使用“:root選擇器”定義的樣式,對所有頁面標記都生效。

 

:not

例如:body*:not(h2)

用于排除body結構中的子結構標記h2。

 

:only-child

例如:li:only-child

用于匹配屬于某父標記的唯一子標記(li),也就是說某個父標記僅有一個子標記(li)。

 

:first=child

用于選擇父元素第一個子標記。

 

:last-child

用于選擇父元素最后一個子標記。


:nth-child(n)

例如:p:nth-child(2)

表示用于選擇父元素第二個p標記。


:nth-last-child(n)

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

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

 

:nth-of-type(n)

例如:h2:nth-of-type(odd)

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

 

:nth-last-of-type(2)

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

表示用于選擇倒數(shù)第二個p標記。

 

:empty

用于選擇沒有子標記或者文本內容為空的所有標記。


 

4、偽元素選擇器

偽元素選擇器一般是一個標記后面緊跟英文冒號“:”,英文冒號后是偽元素名,如下所示。


1574752171445_偽元素選擇器.jpg

 

需要注意的是,標記與偽元素名之間不要有空格,偽元素選擇器常見有:before選擇器和:after選擇器。

:before

例如: p:before

表示:表示在p標記的內容前面插入內容。

 

:after

例如: p:after

表示: 表示在p標記的內容后面插入內容。

 

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

p: after{content: url(); }

猜你喜歡:

web前端高頻面試試題含答案


分享到:
在線咨詢 我要報名
和我們在線交談!