Css中的選擇器

常用的選擇器有如下幾種：

1、標籤選擇器

標籤選擇器，此種選擇器影響範圍大.

舉例：

*

div

…2、id選擇器

html元素以id屬性來設定id選擇器,css 中 id 選擇器以 "#" 來定義。

通過id名來選擇元素，元素的id名稱不能重複，所以乙個樣式設定項只能對應於頁面上乙個元素，不能復用，id名一般給程式使用，所以不推薦使用id作為選擇器。

舉例：

#box

3、類選擇器

class 選擇器用於描述一組元素的樣式,class 選擇器在html中以class屬性表示, 在 css 中，類選擇器以乙個點"."號顯示

通過類名來選擇元素，乙個類可應用於多個元素，乙個元素上也可以使用多個類，應用靈活，可復用，是css中應用最多的一種選擇器。

舉例：

.red

.big
.mt10

…4、後代選擇器

後代選取器匹配所有當前元素的後代元素。 舉例：

.box span

.box .red
.red

5、組選擇器

多個選擇器，如果有同樣的樣式設定，可以使用組選擇器。也稱為 並列選擇

舉例：

.box1,.box2,.box3

.box1
.box2
.box2

6、偽類及偽元素選擇器

常用的偽類選擇器有hover，表示滑鼠懸浮在元素上時的狀態，偽元素選擇器有before和after,它們可以通過樣式在元素中插入內容。

.box1:hover

a:hover /* 滑鼠在該元素上時 */

a:before /在每個元素之前插入內容/

a:after /在每個元素之後插入內容/

7.其他選擇器(了解)

.item>p{}                         子元素選擇器:與後代選擇器相比，子元素選擇器只能選擇某元素的子元素。 

input[name=username]{}         屬性選擇器  :通過特定的屬性來查詢元素
li:list-child{}                 選擇最後乙個li元素
li:first-child{}                選擇第乙個li元素
li:nth-child(2){}               選擇指定的第幾li元素

標籤選擇器           1

​    類選擇器             10
​    id選擇器           100
​    行內樣式         1000
​    偽類選擇器          10
​    屬性選擇器          10
​    關係選擇器     拆開後 權重值相加
注意:​    1) 數值越大, 權重越高
​        2) 權重值相同的情況下, 後面的勝出

CSS中的選擇器

1.關係選擇器 a.後代選擇器特點 父元素 子元素,中間是空格什麼都不加 b.兒子選擇器的特點 父元素 子元素,中間是 號 c.相鄰選擇器特點 元素 元素,中間用 號,但是兩者要為同一級才行 d.兄弟選擇器特點 元素 元素,兄弟元素中間用 號,必須要兩個為同一級 2.屬性選擇器 a.格式是標籤名 屬...

CSS中的選擇器

選擇器可以幫助我們在html中選中想要修飾的標籤 下面選擇器為自己梳理總結 a.標籤名選擇器 根據標籤的名稱選中標籤，格式 標籤名 b.類選擇器 在標籤上新增class屬性，可以根據class的值選中標籤，格式 類名 c.id選擇器 在標籤上新增id屬性，根據id的值選中標籤，id不能重複，格式 i...

css中的選擇器

元素選擇器 作用 根據標籤的來選中指定的元素 語法 標籤名 例如 p div id選擇器 作用 根據元素的id屬性來選中指定的元素 語法 id 例子 box1 red 類選擇器 作用 根據元素的class值來選中指定的元素 語法 class的屬性值 class是乙個標籤的屬性，他和id類似，不同的時...