css常用選取器

標籤：不能   back   區別   組合   開頭   命名   語義   規則   優先順序   

【CSS常用選取器】

標籤選取器
寫法： HTML標籤名{}
作用： 可以選中頁面中，所有與選取器同名的HTML標籤。

li{
color: red;
font-size: 24px;
}

類別選取器(class選取器)
寫法： .class名{}
調用： 在需要調用選取器樣式的標籤上，使用class="class名"調用選取器
優先順序： >標籤選取器

.first{
color: blue;
}


識別碼選取器
寫法： #ID名{}
調用： 需要調用樣式的標籤，起一個id="ID名"
優先順序： ID選取器>class選取器
注意： 一個頁面中，不能出現同名ID

#one{
background-color: yellow;
color: green;
}

【Class選取器與ID選取器的區別】
1、 寫法不同:class選取器用.聲明，ID選取器用#聲明；
2、 優先順序不同： ID選取器>class選取器
3、 作用範圍不同： class選取器可以多次調用，ID選取器只能使用一次。


【選取器的命名規範】
1、只能有字母、數字、底線、減號組成；
2、 開頭不能是數字。也不能是只有一個減號。

一般，起名要求有語義，使用英文單詞與數位組合。



通用選取器
寫法： *{}
作用： 可以選中頁面中所有的HTML標籤。
優先順序： 最低！！！

*{
color: orange;
}


並集選取器
寫法： 選取器1,選取器2,……,選取器n{}
生效規則： 多個選取器取並集，只要標籤滿足其中任意一個選取器，樣式即可生效。

li,.first{
color: red;
}

交集選取器
寫法： 選取器1選取器2……選取器n{} 所有選取器緊挨著，沒有分隔
生效規則： 多個選取器取交集，則必須滿足所有選取器的要求，才會生效

li.first{
color: red;
}

後代選取器
寫法： 選取器1 選取器2 …… 選取器n{} 選取器之間空格分隔
生效規則： 只要滿足，後一選取器是前一個選取器的後代，即可成效。（後代包括子代、孫代、重孫代。。。）

通俗的講：只要後一個選取器，在前一個選取器裡面即可。

div span{
}

子代選取器
寫法： 選取器1>選取器2>……>選取器n{} 選取器之間用>分隔
生效規則： 必須滿足，後一個選取器是前一個選取器的直接子代，才會生效。（中間不能間隔任何標籤）

div>span{
color: orangered;
}

css常用選取器