css常用選擇器
###CSS選擇器的分類
#####標簽選擇器
直接把標簽名當做選擇器來用
語法：標簽選擇器{css屬性名：css屬性值；}
權重：1
```
<style>
div{color:red;}
</style>
<div>div1</div>
<div>div1</div>
<div>div1</div>
```
#####類選擇器
將HTML元素的class標簽屬性值當做選擇器來用，需要在標簽屬性值的前面加“.”
權重：10
> class的標簽屬性值（類名）可以**重復**使用
> class的標簽屬性值（類名）可以有**多**個，類名與類名之間用**空格**隔開
```
<style>
div{ 權重1
color: red;
}
.div2{ 權重10
color: green;
}
</style>
<div>div1</div>
<div class="div2">div2</div>
```
#####ID 選擇器
將HTML元素的id標簽屬性值當做選擇器來用，需要在標簽屬性值的前面加“#”
權重：100
> id 選擇器在HTML頁面中具有唯一性，ID名（標簽屬性值）不能重名，也不能重復使用
> id選擇器是配合javascript使用的
```
<style>
.div{
color: red;}
#div{
color: pink;}
</style>
<div class="div">我是div</div>
<div id="div">我是div</div>
```
標簽選擇器相當於人的姓，類選擇器相當於人的姓名，id選擇器相當於人的身份證
#####通配符選擇器
匹配了所有HTML元素
權重：0<*<1
> 通配符選擇器在項目中不使用，因為比較消耗性能
```
清除所有標簽默認樣式（間距）
*{margin:0;padding:0;}
```
#####後代選擇器（派生選擇器）
在一個根元素的範圍內，去查找它的後代元素
語法：祖輩選擇器 後代選擇器（中間空格隔開）
權重：所有選擇器權重相加之和
```
<style>
.div1 ul li apan{color：red；}
</style>
<div class="div1">
<ul><li><span>我是div</span></li></ul>
</div>
```
#####分組選擇器
將一份CSS樣式，分別給了不用的HTML元素
語法：選擇器1，選擇器2，選擇器3{CSS樣式}
權重：是獨立計算的，不會疊加
```
<style>
p,h1,.box{
width:100px;
height:100px;
background-color:red;}
</style>
<p>p標簽</p>
<h1>我是H1</h1>
<div class="box">我是div</div>
```
#####子級選擇器
存在包含關系，通過父級來確定子級元素
語法：父級選擇器>子級選擇器
權重：所有選擇器權重相加之和
> 如果使用子級選擇器，必須是父子緊鄰的關系，不能跨輩
```
<style>
.div1>ul>li{color:red;}
</style>
<div class="div1">
<ul>
<li>1111</li>
</ul>
</div>
```
#####標簽屬性選擇器
利用標簽屬性當做選擇器來用
語法：[標簽屬性名]{}
[標簽屬性名=標簽屬性值]{}
權重：10
> 當標簽中有class類名時，一般不用標簽屬性選擇器，用類選擇器
```
<style>
[class]{color:red;} [title]{color:red;}
<div class="box" title="zf">珠峰培訓</div>
```
#####交集選擇器
兩種選擇器同屬一個元素的時候，可以使用交集選擇器來進行元素的準確選擇
權重：所有選擇器權重組合相加之和
> 交集選擇器是有哪些選擇器組合的？
> **標簽選擇器和類選擇器**、**標簽選擇器和標簽屬性選擇器**、標簽選擇器和id選擇器、類選擇器和id選擇器、標簽屬性選擇器和id選擇器、類選擇器和標簽屬性選擇器
```