Css選擇器
CSS代碼用來修飾 HTML元素. 要用CSS代碼設置樣式, 首先要選中HTML元素.
用來選中 元素的 代碼稱為 選擇器, 或 選擇符.
html元素是指, 標簽與標簽包裹內容的整體.
常用的選擇器有如下幾種：
1、標簽選擇器
標簽選擇器，此種選擇器影響范圍大.
舉例：
*{margin:0;padding:0}
div{color:red}
<div>…</div> <!-- 對應以上兩條樣式 -->
<div class=“box”>…</div> <!-- 對應以上兩條樣式 -->
2、id選擇器
HTML元素以id屬性來設置id選擇器,CSS 中 id 選擇器以 "#" 來定義。
通過id名來選擇元素，元素的id名稱不能重復，所以一個樣式設置項只能對應于頁面上一個元素，不能復用，id名一般給程序使用，所以不推薦使用id作為選擇器。
舉例：
#box{color:red}
<div id=“box”>…</div> <!-- 對應以上一條樣式，其它元素不允許應用此樣式 -->
3、類選擇器
class 選擇器用于描述一組元素的樣式,class 選擇器在HTML中以class屬性表示, 在 CSS 中，類選擇器以一個點"."號顯示
通過類名來選擇元素，一個類可應用于多個元素，一個元素上也可以使用多個類，應用靈活，可復用，是css中應用最多的一種選擇器。
舉例：
.red{color:red}
.big{font-size:20px}
.mt10{margin-top:10px}
<div class=“red”>…</div>
<h1 class=“red big mt10”>…</h1>
<p class=“red mt10”>…</p>
4、后代選擇器
后代選取器匹配所有當前元素的后代元素。 舉例：
.box span{color:red}
.box .red{color:pink}
.red{color:red}
<div class="box">
<span>…</span>
<a href="#" class="red">…</a>
</div>
<h3 class=“red”>…</h3>
5、組選擇器
多個選擇器，如果有同樣的樣式設置，可以使用組選擇器。也稱為 并列選擇
舉例：
.box1,.box2,.box3{width:100px;height:100px}
.box1{background:red}
.box2{background:pink}
.box2{background:gold}
<div class=“box1”>…</div>
<div class=“box2”>…</div>
<div class=“box3”>…</div>
6、偽類及偽元素選擇器
常用的偽類選擇器有hover，表示鼠標懸浮在元素上時的狀態，偽元素選擇器有before和after,它們可以通過樣式在元素中插入內容。
.box1:hover{color:red}
<div class="box1">…</div>
a:hover {color: #FF00FF; text-decoration: underline} /* 鼠標在該元素上時 */
a:before{content:“Hello”;} /在每個<a>元素之前插入內容/
a:after{content:“world”;} /在每個<a>元素之后插入內容/
7.其他選擇器(了解)
.item>p{} 子元素選擇器:與后代選擇器相比，子元素選擇器只能選擇某元素的子元素。 input[name=username]{} 屬性選擇器 :通過特定的屬性來查找元素li:list-child{} 選擇最后一個li元素li:first-child{} 選擇第一個li元素li:nth-child(2){} 選擇指定的第幾li元素
選擇器之間的優先級別
標簽選擇器 1? 類選擇器 10? ID選擇器 100? 行內樣式 1000? 偽類選擇器 10? 屬性選擇器 10? 關系選擇器 拆開后 權重值相加注意:? 1) 數值越大, 權重越高? 2) 權重值相同的情況下, 后面的勝出
