css-選擇器

做爲一個前端碼農，很多接觸CSS，懂CSS各類選擇器以及權重值計算很重要，想固然的以爲CSS選擇器沒什麼難點的，就像我這樣的，反正一層一層加，確定能覆蓋我以前寫的，那最後的代碼後期維護起來想一想都怕怕哦。因此今天利用六分鐘的時間學學CSS選擇器以及權重計算仍是很重要的。

經常使用的CSS選擇器歸納

通配符選擇器（*）-0
標籤選擇器-1
僞元素（::after,::before,::selection,::first-line,::first:letter）-1
類選擇器-10
僞類選擇器（:link,:hover,:active,:visited,:root,:target,:not）-10
屬性選擇器（[title],[title=value]）-10
id選擇器-100
內聯樣式-1000

做爲補充，
1. 還有 後代選擇器 ，親子選擇器>，兄長選擇器~，相鄰選擇器+,權重拆分爲兩個算再計算求和
2. !important 最重要權重，優於一切，對於分別給類選擇器和標籤選擇器樣式添加!mportant，按其餘選擇器權重和高的樣式爲準

---

通配符選擇器 *

通配符選擇器都是怎麼用呢？

通常清除默認樣式的時候，用通配符設置，通配符設置的樣式覆蓋了默認樣式，默認樣式既是繼承，繼承是沒有權重的
由於繼承無權重，因此能夠被 通配符 權重爲0 的選擇器設置的樣式覆蓋

標籤選擇器，僞元素選擇器

這兩個歸爲權重值相同的一類，能夠理解。渲染完頁面，控制檯elements展現的源碼中，僞元素做爲和標籤同樣展現。

類選擇器，僞類選擇器，屬性選擇器

理解爲掛在類選擇器上的，想一想是否是？
好比.classs,.class[title],.class[title='text'],.class:hover,:class:active

id選擇器

從理解js獲取dom節點來看，getElementByID,獲取到的只有一個，可想而知比class權重也高，只能惟一設置，享有惟一性。

內聯選擇器

<h1 style="font-size:14px;"></h1>

記住就近原則，可想而知內聯選擇器權重值最大---1000，上面的依次減一個0，最後通配符0

除了權重以外

以上選擇器是有權重計算的，還經常見到由於順序以及設置css來源不一樣，致使渲染出結果不一樣的狀況，解析：

1. 就近原則
   內聯樣式必定優先於外聯樣式，
   同等權重時後設置樣式必定大於前設置的樣式，
   用戶自定義的 > 開發人員設置的 > 用戶代理默認的（瀏覽器默認的）
2. 由此推薦連接樣式排序(link-visited-hover-active, LVHA)

   其都是僞類元素，權重同樣，後覆蓋前，因此爲了防止點擊後（visited）以及 未訪問(:link)，:hover
   和:active不能觸發，設置了LVHA原則。
   由於任何連接不是已訪問，就是未訪問，因此將lV放後面會覆蓋前兩個 的樣式。