CSS3新增了哪些選擇器

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

　　1、 屬性選擇器

　　屬性選擇器可以根據網頁標記的屬性及屬性值來選擇標記。屬性選擇器一般是一個記后緊跟中括號“[]”，中括號內部是屬性或者屬性表達式。

　　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)關系選擇器

　　例如： h2>strong

　　說明：表示選擇嵌套在h2標記的子標記strong。

　　(2)臨近兄弟選擇器

　　例如： h3+p

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

　　(3)普通兄弟選擇器

　　例如：p~h3

　　說明：表示選擇p標記所有的h3兄弟標記。

　　3、結構化偽類選擇器

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

　　:root

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

　　:not

　　例如：body*:not(h3)

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

　　: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)

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

　　:nth-of-type(n)

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

　　表示用于選擇所有h3標記中位于奇數行數的標記。

　　:nth-last-of-type(2)

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

　　表示用于選擇倒數第二個p標記。

　　:empty

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

　　4、偽元素選擇器

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

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

　　:before

　　例如： p:before

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

　　:after

　　例如： p:after

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

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

　　p: after{content: url();}

到此，關于“CSS3新增了哪些選擇器”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！