標簽選擇器
標簽選擇器就是選擇一些HTML的不同標簽，由于它們的標簽需求不同，所以CSS需要設置標簽去選擇它們，為滿足它們的需求給予對應的屬性
基礎選擇器
標簽選擇器
<!DOCTYPE html>
<head><title>HOME</title><style>p{color: brown;}</style>
</head>
<body><p>Hello,World</p>
</body>
</html>這里的<style></style>里面的p{}就是標簽選擇器，它選擇了<p></p>標簽，將<p></p>標簽內的文本顏色修改為紅色?
演示結果
這里的Hello,World是紅色的
?類選擇器
類選擇器的存在是為了差異化每個選擇器標簽，它的基本格式為
.類名{所需要的屬性}
<div class="類名 類名 ...">文本</div>
基本代碼
<!DOCTYPE html>
<head><title>HOME</title><style>.set{color: brown;}.size{font-size: 50px;}</style>
</head>
<body><p class="set size">Hello,World</p>
</body>
</html>演示結果
這里<p></p>的文本添加了兩個類型名，分別是更改顏色和大小的類選擇器
id選擇器?
id選擇器和類選擇器的使用方式是相同的，唯一的不同點在于id選擇器只能引用一個類名，而類選擇器可以引用多個類名
基本使用方式
#id{屬性}
<div id="屬性名">文本內容</div>?
代碼演示
<!DOCTYPE html>
<head><title>HOME</title><style>#set{color: brown;font-size: 50px;}</style>
</head>
<body><div id="set">Hello,World</div>
</body>
</html>演示結果
?
通配選擇器?
通配選擇器格式
*{屬性}
通配選擇器會對所有文本生效
演示代碼
<!DOCTYPE html>
<head><title>HOME</title><style>*{color:aqua;font-size: 50px;}</style>
</head>
<body><div>Hello,World</div>
</body>
</html>演示結果
CSS復合選擇器
復合選擇器是由基礎選擇器構成的，當我們的代碼非常龐大時，復合選擇器可以用來更準確的定位某個標簽，將它的屬性改寫
后代選擇器
后代選擇器是由兩個父子選擇器構成的，當標簽的class既滿足父標簽又滿足子標簽那么它的屬性才會被后代選擇器修改
基本結構
.father son{}
我們來演示一下
演示代碼
<!DOCTYPE html>
<head><title>HOME</title><style>.father span{color: blueviolet;font-size: 50px;}</style>
</head>
<body><div class="father"><span>Ni Hao</span><p><span>Hello,World;</span></p></div>
</body>
</html>演示結果
?我們可以得知當文本滿足后代選擇器的兩個先后條件時，后代選擇器的更改生效，只要滿足子標簽在父標簽的內部即可
子選擇器
子選擇器需要子標簽是父標簽里面的第一個直接標簽，也就是說子標簽必須要是父標簽的親兒子標簽，否則不生效
語法
父親>兒子{}
演示代碼
<!DOCTYPE html>
<head><title>HOME</title><style>div>span{color: blueviolet;font-size: 50px;}</style>
</head>
<body><div><span>Ni Hao</span><p><span>Hello,World;</span></p></div>
</body>
</html>演示結果
我們可以看到，同樣是<span></span>標簽，但其中鄙視<div></div>標簽的親兒子標簽不會被后代選擇器選擇?
并集選擇器
并集選擇器可以在同一行定義許多個其它的復合選擇器或基礎選擇器
語法
元素1 元素2{}?
演示代碼
<!DOCTYPE html>
<head><title>HOME</title><style>div,span,.father div{color: blueviolet;font-size: 50px;}</style>
</head>
<body><div>WeChat</div><span>Ni Hao</span><p>Hello,World;</p>
</body>
</html>演示結果
我們可以發現這個并集選擇器同時選擇了<span></span>和<div></div>兩個標簽
當然我們也可以并上子選擇器和后代選擇器
演示代碼
<!DOCTYPE html>
<head><title>HOME</title><style>.blue span,div>span{color: blueviolet;font-size: 50px;}</style>
</head>
<body><div><p class="blue"><span>P內的span文字標簽</span><div>P內的div文字標簽</div></p><span>div內的span文字標簽</span></div>
</body>
</html>?演示結果
我們可以看到并集選擇器同時完成了子選擇器和后代選擇器的功能
偽類選擇器?
用于給一些元素添加某種效果
鏈接偽類選擇器
a：link，選擇未被訪問的鏈接
a：visited，選擇已經被訪問的鏈接
a：hover，選擇鼠標懸停的鏈接
a：active，選擇鼠標點擊的鏈接
演示代碼
<!DOCTYPE html>
<head><title>HOME</title><style>a{font-size: 50px;}a:link {color: rgb(165, 14, 14);}a:active {color: rgb(249, 5, 5);}a:hover {color: rgb(153, 0, 255);}a:visited {color: rgb(127, 253, 2);}</style>
</head>
<body><a href="https://www.bilibili.com/">bilibili</a>
</body>
</html>演示結果
?當我們鼠標懸停時
這里由于瀏覽器的安全限制我們就先不演示其它的了?
：focus 偽類選擇器
focus用于獲取表單，focus通過獲取表單得到修改表單的權限
我們來演示一下
演示代碼
當我們點擊這些表單的時候，這些表單便會因為選擇器添加的屬性而變色
CSS三大特性?
層疊性
當我們由兩個相同的選擇器時，那么就會發生命名沖突，那么命名沖突后，編譯器會怎么選擇屬性呢
演示代碼
<html>
<head><title>Document</title><style>p{color: brown;font-size: 50px;}p{color: blue;}</style>
</head>
<body><p>Hello,World</p>
</body>
</html>演示結果
當由兩個p選擇器時，后面的選擇器屬性會覆蓋前面的，沒有被覆蓋的屬性會繼承下來，比如顏色被覆蓋，但是文本大小被繼承下來
繼承性?
在CSS中子進程會繼承父進程的特性
演示代碼
<html>
<head><title>Document</title><style>div{color: brown;font-size: 50px;}</style>
</head>
<body><div>your name <p>Hello,World</p></div>
</body>
</html>演示結果
這里的<p></p>標簽繼承了<div></div>標簽的特性
優先級?
當一個元素被多個選擇器選擇會出現兩種情況
選擇器相同，執行層優先
選擇器不同，執行優先級
選擇器的優先級取決于，選擇器的權重
| 選擇器 | 權重 |
|---|---|
從父級繼承 / 通配符* | 0.0.0.0 |
| 標簽選擇器 | 0.0.0.1 |
| 類選擇器 / 偽類選擇器 | 0.0.1.0 |
| id選擇器 | 0.1.0.0 |
行內樣式style="" | 1.0.0.0 |
!important?修飾 | ∞ |
代碼演示
<html>
<head><title>Document</title><style>div{color: brown;font-size: 50px;}.father{color:black;}#son{color: blue;}</style>
</head>
<body><div class="father" id="son">Hello,World</div>
</body>
</html>演示結果
因為id選擇器權重最高，所以是藍色
還有一個!important元素，當選擇器加上它時，那么它的優先級就是最高
當有兩個元素都加了!important時，那么就比較它們各自的優先級，如果它們時相同的選擇器，那么就比它們那個在后面
代碼演示
<html>
<head><title>Document</title><style>div{color: brown;font-size: 50px;}#son{color: blue !important;}.father{color:black !important;}</style>
</head>
<body><div class="father" id="son">Hello,World</div>
</body>
</html>演示結果
?雖然father加了!important，但是son也加了，所以最后比較的就是son和father的優先級
?權重的疊加
當我們使用后代選擇器或者子選擇器時，便會發生權重的疊加
比如div span的權重疊加起來就是 0.0.0.1 + 0.0.0.1 = 0.0.0.2
div .father的權重? ? ? ? ? ? ? ? ? ? ? ? ? ? 0.0.0.1 + 0.0.1.0 =0.0.1.1
.father .son的權重? ? ? ? ? ? ? ? ? ? ? ? ? 0.0.1.0 + 0.0.1.0 =0.0.2.0
權重會在對應的位置疊加，但權重不會進位
代碼演示
<html>
<head><title>Document</title><style>.FATHER span{color: brown;font-size: 50px;}div span{color: blue;font-size: 50px;}</style>
</head>
<body><div class="FATHER"><span>HELLO,WORLD</span></div>
</body>
</html>演示結果
因為.FATHER + span的權重大于 div + span的權重，所以最后是.FATHER?+ span選擇器生效
)
)
：Pod狀態異常排查手冊)
