CSS 後代選擇器和權值計算
阿新 • • 發佈：2018-12-05
子選擇器（第一代）
符號：>
作用：選中兒子元素
示例：
<style type="text/css">
.music>li{border:1px solid red;} <!-border邊框樣式-->
<!--操作區-->
<body>
<h1>Music Singer</h1>
<ul class="music">
<li>Chinese
<ul>
<li>Leijun</li 
包含選擇器（所有後代）
符號：空格
作用：選中所有兒子孫子元素
示例：
<head>
<style type="text/css">
.music li <!--此處修改為空格後-->
{
border:1px solid red;
}
特殊性
選擇器樣式的搭配：就近原則 即：內聯>嵌入>外部
有的時候我們為同一個元素設定了不同的CSS樣式程式碼，那麼元素會啟用哪一個CSS樣式呢?我們來看一下面的程式碼：
p{color p和.first都匹配到了p這個標籤上，那麼會顯示哪種顏色呢？green是正確的顏色，那麼為什麼呢？是因為瀏覽器是根據權值來判斷使用哪種css樣式的，權值高的就使用哪種css樣式。
下面是權值的規則：
標籤的權值為1，類選擇符的權值為10，ID選擇符的權值最高為100，內聯樣式選擇符的權值最高為1000。例如下面的程式碼：
p{color:red;} /權值為1/
p span{color:green;} /權值為1+1=2/
.warning{color:white;} /權值為10/
p span.warning{color:purple;} /權值為1+1+10=12/
footer .note p{color:yellow;} /權值為100+10+1=111/
注意：還有一個權值比較特殊–繼承也有權值但很低，有的文獻提出它只有0.1，所以可以理解為繼承的權值最低。
最高權值：寫在樣式的分號前：p{color:red!important;} — 此權值高於使用者自己設定的樣式。