css選擇器有哪幾種？

今天小編為大家分享的是有關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選擇器的介紹，內容較為全面，小編相信有部分知識點可能是我們日常工作可能會見到或用到的。希望你能通過這篇文章學到更多知識。