詳解css樣式處理的優先順序
阿新 • • 發佈：2018-12-26
想要對一個標籤處理它的樣式，可以用 class=“” 的方式來定義它的類，然後在類中處理他的樣式
例如：
<style>
.box{width:100px;height:100px;background:#0f0}
</style>
<div class="box" ></div>當然也可以用 id ，或者乾脆直接對標籤寫樣式，然而如果把這些定義都放在了一個元素中的時候，就蒙圈了，計算機到底先處理誰呢？需要更改的時候，改哪個呢？
比如這樣的問題:
<style> div{} .aa{} #bb{} </style> <div class="aa" id="bb" style="xxx:xxx"></div>
裡面既定義了 標籤 div 又定義了 類aa 還定義了 bb,而且又在裡面定義了 行內樣式 style="xxx:xxx" 那麼如果我要更改的話，到底改誰呢。這就涉及到一個css 樣式優先順序的問題了。
經過總結：得到如下經驗：
優先順序：
規則一：標籤< class < id < 行內樣式 <!import
規則二：同級元素以順序排序作為判斷依據:下面的覆蓋上面的
例子一:
class 和 id比較
<style> .hh{clear:both} #bo{background:#0f0;width:100px; height:100px} /*綠色*/ .box{width:50px;height:50px;background:#00f;float:left} </style> <div class="box"></div> <div class="box" id="bo"></div>
總結：
一、優先順序高的 如果定義的屬性和優先順序低的定義的屬性相沖突，那麼會覆蓋優先順序低的
二、優先順序低的定義的屬性，優先順序高的沒有再次定義，那麼會繼承優先順序低的
同級元素以順序排序作為判斷依據:下面的覆蓋上面的
例：<style>
.box1{width:100px;height:100px;}
.box1{background:#0f0} /*綠色*/
.box1{background:#f00} /*紅色*/
</style>
<div class="box1"></div>
總結：
一：優先順序相同級別的情況下，系統按照最後一次定義的屬性為標準。下面覆蓋上面的
原因:瀏覽器解釋html 語言的方式是從上往下，從左往右的解釋，通過解釋完所有樣式得出最終結果才會顯示出來。