標籤：原則 lin 交集 nbsp text 三種方式 優先順序 方式 height
標籤選取器:
作用:根據選取器的名稱,選中頁面中所有的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 初引
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
