css 初引
標簽選擇器:
作用:根據選擇器的名稱,選中頁面中所有的HTML標簽
li{
color: blue;
}
類選擇器
寫法: .class名{}
調用:在HTML標簽中,使用class="class名"調用選擇器
優先級，class選擇器大於標簽選擇器
*/
.li1{
color: red;
}
id選擇器:
寫法:#id名{}
調用:在html標簽中,用id="id名"來調用
優先級：id選擇器大於class選擇器
#first{
color: green;
}
選擇器註意事項
1.寫法不同:class選擇器使用.聲明,id選擇器用#聲明
2.優先級不同:作用於同一個標簽時:id>class>標簽選擇器
3.在同一個HTML文件中,id是唯一的,所以id選擇器只能作用於一個標簽上.但是class可以作用於N個.
選擇器的命名規則
只能有字母/數字/下劃線/減號組成
開頭不能是數字
通用選擇器:
寫法: *{}
作用:選中頁面,所有標簽,包括html
優先級:最低,小於標簽選擇器
*{
background-color: blueviolet;
}
選擇器優先級排序：
* 首選遵循的是近者優先的原則，哪個選擇器作用於最裏層標簽，哪個生效
* 當作用於同一層標簽時，優先級排序↓
* id>class>標簽>通用選擇器（作用於同一個標簽上）
* 權重：
* 標簽選擇器 1
* class選擇器 10
* id選擇器 100
* 行級樣式表 1000
* 例如：
* .div1 #div2 .div3 #div4 #li{}
* .div1 #div2 #div3 #div4 #li{}
* 如果計算的優先級相同，後寫的選擇器生效。
* 註意：只有交集 後代 子代選擇器才參與優先級的累加，而並集選擇器相當於寫了多個選擇器，所以不參與總的累加
ul li{
color: aquamarine;
}
交集選擇器
寫法:兩個選擇器緊挨著沒有任何分隔,選擇器1選擇器2選擇器3....{}
作用效果:一個標簽要滿足交集選擇器,則必須滿足交集選擇器中出現的所有選擇器
#first.li1{
color: aliceblue;
}
並集選擇器
*寫法：選擇器1，選擇器2，..{}
*生效規則：只要滿足並集選擇器的任意一個，即可生效。
#first,.li1{
color: cadetblue;
}
後代選擇器
寫法:選擇器1 選擇器2 選擇器3{}選擇器之間用空格隔開
生效規則:必須滿足後一個選擇器是前一個選擇器的後代才可以生效.(子代/孫代/重孫..)
ul .li1{
color: red;
}
子代選擇器
寫法:選擇器1>選擇器2>選擇器3{}選擇器之間用>隔開
生效規則:必須滿足後一個選擇器是前一個選擇器的直接子代才可以生效，隔代即中間包含其它標簽不會生效.
ul>.li1{
color: red;
}
引入css的三種方式
1.行級樣式表:在HTML標簽中,使用styl=""形式
缺點:不符合w3c內容和表現分離的要求
代碼雜亂,不利於後期維護
2.內部樣式表:在header標簽中使用<style>標簽包裹css代碼
<head>
<style type="text/css">
</style>
</head>
3.外部樣式表:講css代碼，全部寫到一個css文件中，使用link標簽，將html文件與css文件關聯。
<link rel="stylesheet" href="css/.." />
css 初引