類別名稱選擇器是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遮罩層顯示出來）
偽元素清除浮動
#（學習影片分享：

css影片教學

、html影片教學）

以上是類別名稱選擇器是css3新增才有的嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章！