首頁 >web前端 >css教學 >關於css選擇器的介紹

關於css選擇器的介紹

王林
王林轉載
2020-05-10 09:08:412217瀏覽

關於css選擇器的介紹

標籤選擇器

例如:

`p`、`a`、`h[1,6]`、`span`、`div`、、、

類別選擇器(class)

class 選擇器以"." 來定義。 

如:

.id1{样式属性:值;}

命名盡量別用底線,會出現相容問題,底線一般用於JS裡,也不要用純數字或中文名。

例如:

<div class="class1"></div>

注意:

類別選擇器也包含多類別名稱選擇器

<div class="class1 class2.."></div>

(影片教學建議:css影片教學

ID選擇器

id ​​選擇器以"#" 來定義。如:#id1{樣式屬性:值;}命名方式如類別選擇器

例如:

<div id="id1"></div>

通配符選擇器##

*{样式属性:值;}

偽類選擇器

連結偽類選擇器(主要針對於a標籤可以沒有但是順序不能顛倒)

:link  /*未访问的链接*/:visited  /*已访问的链接*/:hover  /*鼠标移动到链接上*/     
最常用的链接伪类选择器:active  /*选定的链接 别松开的状态*/

#結構(位置)偽類別選擇器CSS3

:first-child   選取屬於其父元素的首個子元素的指定選擇器

:last-child   選取屬於其父元素的最後一個子元素的指定選擇器

:nth-child(N)  符合屬於其父元素的第N個子元素的每個元素,不論元素的類型,從最後一個子元素開始計數。 N可以是數字,關鍵字或公式   

關鍵字:odd是奇數 even是偶數

表達式: 2n偶數 2n 1奇數 n為倍數

:nth- last-child()是從最後一個子元素開始數 預設為首元素


#目標偽類選擇器

:target目標偽類選擇器選擇器可用來選取目前活動的目標元素

子元素選擇器

子元素選擇器只能選擇作為某元素子元素的元素。

寫法:

父級在前,子集在後,中間用> 連接

註:> 兩邊各要有一個空格,不包含孫子,子孫集,只是兒子集不用> 則可以選擇所有後代


屬性選擇器

選取標籤帶有某些特殊屬性的選擇器可以使用屬性選擇器

寫法:a[title] {} 屬性選擇器中庸中括號表示 div[class^=font] { } 以font開始的 div[class$=font] { } 以font結束的 div[class*=tao] { } 表示tao在任意位置都可以。


偽元素選擇器(CSS3)

.dome  類別選擇器:first-child  偽類別選擇器::first-letter 偽元素選擇器

E::first-letter  文本的第一個字或字

E::first-line  文本第一行

E::selection  可改變選取文本的樣式(滑鼠)

E::before{ content:"文字" }  盒子內部前面(加字)

E::after{ content:"文字" }  盒子內部後面(加字體)


推薦教學:

css快速入門

以上是關於css選擇器的介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:cnblogs.com。如有侵權,請聯絡admin@php.cn刪除