樣式的層級關係，選擇器優先順序，樣式衝突，以及抽離樣式模組怎麼寫，說出思路，有無實踐經驗
阿新 • • 發佈：2018-12-26
1、樣式的層級關係：一個是權重，另一個就是共用樣式和私用樣式了，比如說兩個ul，它們的子元素除了背景色之外都一樣，那可以直接用li {}來定義相同的公用樣式，用 .ul_1 li {} ， .ul_2 li {} 來定義不相同的樣式。可以根據元素之間的差別來選擇用哪種方法。推薦用多層級的方式書寫css選擇器。
2、選擇器優先順序：（!important>）id選擇器>class選擇器（屬性選擇器/偽類選擇器）>標籤選擇器（偽元素選擇器） 同類選擇符條件下層級越多的優先順序越高。優先順序就近原則，同權重情況下樣式定義最近者為準。載入樣式以最後載入的定位為準。
3、樣式衝突： 如果同個元素有兩個或以上衝突的CSS規則，瀏覽器有一些基本的規則來決定哪一個非常特殊而勝出。選擇器一樣的情況下後面的會覆蓋前面的屬性。
使用巢狀選擇器時：
一組巢狀選擇器的實際特性可以計算出來。基本的，使用ID選擇器的值是100，使用class選擇器的值是10，每個html選擇器的值是1。它們加起來就可以計算出特性的值。
p的特性是1（一個html選擇器）
div p的特性是2（兩個html選擇器）
.tree的特性是10（1個class選擇器）
div p.tree的特性是1+1+10=12，（兩個html選擇器，一個class選擇器）
#baobab的特性是100（1個ID選擇器）
body #content .alternative p的特性是112（兩個html選擇器，一個ID選擇器，一個類選擇器）
基本上，一個選擇器越多特性，樣式衝突的時候將顯示它的樣式。
4、抽離樣式模組因為瀏覽器的相容問題，不同瀏覽器對有些標籤的預設值是不同的，如果沒對CSS初始化往往會出現瀏覽器之間的頁面顯示差異。當然，初始化樣式會對SEO有一定的影響，但魚和熊掌不可兼得，但力求影響最小的情況下初始化。
最簡單的初始化方法： * {padding: 0; margin: 0;} （強烈不建議）
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }