1、別名:標簽選擇器、標記選擇器

特點：通過元素名稱作為選擇器名稱

作用：修改某一元素的默認樣式 body{} h1{} h2{}

2、類選擇器(類樣式)

特點：通過元素的 class 屬性來進行引用

作用：定義某一組標簽的統一樣式

語法：.className{color:red;bakcground:yellow;}

註意：className不能以數字開頭

引用：<div class="className"></div> <h3 class="className"></h3>

註意：在一個class 中可以引用多個 類樣式,多個類樣式用 空格 隔開 例如 <div class=“myDiv firstDiv”> 我是div</div>

3、分類選擇器

由類選擇器衍生出來的新選擇器 將類選擇器 與 元素選擇器 結合使用

目的：為了更精準的定位的頁面的元素

語法：元素選擇器.類選擇器{}

例如： p.content{}

4、通用選擇器

作用：適配頁面上所用的元素，改變他們的樣式

語法：*{}

5、id選擇器(id樣式)

作用：通過頁面元素的id值來進行選擇器的引用,非常方便的定位到頁面上的一個元素。精確定位。

語法：#id{} eg : #top{background-color:red;} <div id="top"></div> id的

作用： 1、定義元素在頁面中的唯一標識 2、引用樣式表中的id樣式

6、群組選擇器

選擇器聲明是以 , 隔開的 選擇器列表

作用：定義一組元素的樣式 h3,p,.new,#test,div.newDiv,p.test{}

7、後代選擇器

根據元素的嵌套關系來定義的樣式 根據一個元素 去定位 它裏面的其他元素

語法： selector1 selector2{}

<div>

　　<div>

　　　　<p>

　　　　　　<span></span>

　　　　 </p>

　　 </div>

　　<span></span>

</div>

8、子代選擇器

要求選擇器之間只能存在父子關系

語法: selector1>selector2 #test>.news{ 修改 id為test裏面的 class為news的元素 }

後代選擇器 和 子代選擇器 目的是為了精確匹配範圍

9、偽類選擇器

匹配元素 不同狀態時候的選擇器

語法：selector1:偽類選擇器 偽類選擇器

分類：

1、鏈接偽類

:link : 適用於尚未訪問的鏈接，與:visited互斥

:visited : 適用於已訪問過的超鏈接，與:link相斥

2、動態偽類

:hover : 適用於鼠標懸停在元素上面時候的狀態

:active : 元素被激活的一瞬間的狀態

:focus : 適用於元素獲取焦點時的狀態

註意： 需要註意的是在CSS的定義中，同一個元素的:hover必須位於:link、:visited之後才能生效， :active必須位於:hover之後才能生效

css基礎選擇器