類別名稱選擇器是css3新增才有的嗎

WBOY
發布: 2022-06-20 15:48:46
原創
1395 人瀏覽過

類別名稱選擇器不是css3新增才有的,類別名稱選擇器用來選取帶有指定類別的元素,語法為「.class{css程式碼;}」;類別名稱選擇器是在css3之前就已經開始使用了,並不是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中文網其他相關文章!

相關標籤:
css
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!