關於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中文網其他相關文章！