標籤:作用 one bsp 並集 英文單詞 使用 選擇 class 組合
CSS注釋
CSS修改頁面中的所有標籤,必須藉助選取器選中。
選取器中,可以寫多對CSS屬性,用{}包裹;
每個屬性名稱與屬性值之間用:分隔,多對屬性之間,必須用;來分隔
選取器{
屬性1:屬性值1;
屬性2:屬性值2;
【選取器的命名規範】
1、只能有字母、數字、底線、減號組成。
2、開頭不能是數字,也不能是只有一個減號。
一般,起名要求有語義,使用英文單詞與數位組合。
1、標籤選取器
寫法:HTML標籤名{}
作用:可以選中頁面中,所有與選取器同名的HTML標籤。
例如:
li{
color:red;
font-size: 48px;
}
2、類別選取器(class選取器)
寫法:.class名{}
調用:在需要調用選取器樣式的標籤上,使用class=“class名”調用選取器
優先順序:class選取器>標籤選取器
例如:
.first{
color: blue;
}
3、ID選取器
寫法:#ID名{}
調用:需要調用樣式的標籤,起一個id=“ID名”
優先順序:ID選取器>class選取器
注意:一個頁面中,不能出現同名ID
例如:
#one{
background-color: yellow;
}
【class選取器和ID選取器的區別】
1、寫法不同:class選取器用.聲明,ID選取器用#聲明;
2、優先順序不同:ID選取器>class選取器;
3、作用範圍不同:class選取器可以多次調用,ID選取器只能使用一次。
4、通用選取器
寫法:*{}
作用:可以選中頁面中所有的HTML標籤。
優先順序:最低!!
例如:
*{
color: orange;
}
5、並集選取器
寫法:選取器1,選取器2,.....,選取器n{}
生效規則:多個選取器取並集,只要標籤滿足其中任意一個選取器,樣式即可生效。
例如:
li,.first{
color: red;
}
6、交集選取器
寫法:選取器1選取器2......選取器n{} 所有選取器緊挨著,沒有分隔
生效規則:多個選取器取交集,則必須滿足所有選取器的要求,才會生效
例如:
li.first{
color:red;
}
7、後代選取器
寫法:選取器1選取器2......選取器n{} 選取器之間空格分隔
生效規則:只要滿足,後一選取器是前一個選取器的後代,即可生效。(後代包括子代、
孫代、重孫代 。。。)
例如:
div span{
color:orange
}
8、子代選取器
寫法:選取器1>選取器2>......>選取器n{} 選取器之間用>分隔
生效規則:必須滿足,後一個選取器是前一個選取器的直接子代,才會生效。(
中間不能間隔任何標籤)
例如:
div>span{
color: orangered;
}
【優先順序的權重問題】
1、css生效的第一原則是“近者優先”!即,哪個選取器作用於最裡層標籤,則這個選取器生效;
2、當選取器作用於同一層時,可以根據優先順序權重,進行累加計算:
ID選取器為100 > class選取器為10 > 標籤選取器為1
注意:並集選取器,相當於多個選取器拆開寫,所以,並集選取器的優先順序不能累加。
3、當選取器作用於同一層,且優先順序權重相等時。則,寫在最後的選取器生效。
CSS常用的選取器和優先順序的權重問題