類別名稱選擇器不是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新增選擇器
屬性選擇器
結構偽類別選擇器
- 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中文網其他相關文章!