類名選擇器是不是css3新增的

這篇文章主要講解了“類名選擇器是不是css3新增的”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“類名選擇器是不是css3新增的”吧！

類名選擇器不是css3新增才有的，類名選擇器用于選取帶有指定類的元素，語法為“.class{css代碼;}”；類名選擇器是在css3之前就已經開始使用了，并不是css3新增的，css3新增的選擇器有屬性選擇器、結構偽類選擇器等。

本教程操作環境：windows10系統、CSS3&&HTML5版本、Dell G3電腦。

類名選擇器

類選擇器

用class屬性調用class類

舉例：

 <p class="one">類選擇器</p>

 .one {
       color: yellow;
        }

這里的p標簽類名叫做one，css給他添加樣式的時候用的.+one（他的類名）選擇的他，這種就是類選擇器。

擴展知識：css3新增選擇器

屬性選擇器

• input[value] { }(input并且具有value屬性)

• input[type=text] {} {input的屬性的值為text的需要更改}

• div[class^=icon] { } (選擇首先是div 然后 具有class屬性 并且屬性值 必須是 icon開頭的這些元素 )

• section[class$=data] {} ( 選擇類名以data結尾的 )

結構偽類選擇器

• ul li:first-child { } （選擇ul里面的第一個孩子 小li）

• ul li:last-child { } （選擇ul里面的最后一個孩子 小li）

• ul li:nth-child(2) { } （選擇ul里面的第二個孩子 小li）

• ul li:nth-child(6) { } （選擇ul里面的第六個孩子 小li）

• ul li:nth-child(even/2n) { } （把所有的偶數 even的孩子選出來 ）

• ul li:nth-child(odd/2n+1) { } （把所有的奇數 odd的孩子選出來）

• ol li:nth-child(n) { } （從0開始 每次加1 往后面計算 必須是n 不能是其他的字母 選擇了所有的孩子

• ul li:nth-child(n+5) { } (選擇從第五個孩子開始)

• ul li:nth-child(-n+5) { } (選擇從第五個孩子開始往前數)

• ul li:first-of-type { } （第一個孩子）

• ul li:last-of-type { } （最后一個孩子）

• ul li:nth-of-type(even) { } （偶數孩子）

• section div:nth-child(1) { } （nth-child 會把所有的盒子都排列序號執行的時候首先看 :nth-child(1) 之后回去看 前面 div ）

• section div:nth-of-type(1) { } （nth-of-type 會把指定元素的盒子排列序號；執行的時候首先看 div指定的元素 之后回去看 :nth-of-type(1) 第幾個孩子 ）

偽元素選擇器（頁面中找不到的，常用于字體標簽）[和標簽選擇器一樣，權重為1]

• ：：before在元素的前面插入內容（父盒子的內部的前面）

• ：：after在元素的后面插入內容（父盒子的內部的后面）

• 必須有content屬性

• div::after { content: '我';}

• .tudou:hover::before { } （當我們鼠標經過了 土豆這個盒子，就讓里面before遮罩層顯示出來）

• 偽元素清除浮動

感謝各位的閱讀，以上就是“類名選擇器是不是css3新增的”的內容了，經過本文的學習后，相信大家對類名選擇器是不是css3新增的這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！