想要對(duì)一個(gè)標(biāo)簽處理它的樣式，可以用 class=“” 的方式來(lái)定義它的類，然后在類中處理他的樣式

例如：

<style>.box{width:100px;height:100px;background:#0f0} </style><div class="box" ></div>
當(dāng)然也可以用 id ，或者干脆直接對(duì)標(biāo)簽寫(xiě)樣式，然而如果把這些定義都放在了一個(gè)元素中的時(shí)候，就蒙圈了，計(jì)算機(jī)到底先處理誰(shuí)呢？需要更改的時(shí)候，改哪個(gè)呢？

比如這樣的問(wèn)題:

<style> div{} .aa{} #bb{} </style> <div class="aa" id="bb" style="xxx:xxx"></div>
里面既定義了 標(biāo)簽 div 又定義了 類aa 還定義了 bb,而且又在里面定義了 行內(nèi)樣式 style="xxx:xxx" 那么如果我要更改的話，到底改誰(shuí)呢。這就涉及到一個(gè)css 樣式優(yōu)先級(jí)的問(wèn)題了。

經(jīng)過(guò)總結(jié)：得到如下經(jīng)驗(yàn)：

優(yōu)先級(jí)：

規(guī)則一：標(biāo)簽< class < id < 行內(nèi)樣式 <!import?

規(guī)則二：同級(jí)元素以順序排序作為判斷依據(jù):下面的覆蓋上面的

例子一:

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>

總結(jié)：

一、優(yōu)先級(jí)高的 如果定義的屬性和優(yōu)先級(jí)低的定義的屬性相沖突，那么會(huì)覆蓋優(yōu)先級(jí)低的

二、優(yōu)先級(jí)低的定義的屬性，優(yōu)先級(jí)高的沒(méi)有再次定義，那么會(huì)繼承優(yōu)先級(jí)低的

---

同級(jí)元素以順序排序作為判斷依據(jù):下面的覆蓋上面的

例： <style> .box1{width:100px;height:100px;} .box1{background:#0f0} /*綠色*/ .box1{background:#f00} /*紅色*/ </style><div class="box1"></div>

總結(jié)：

一：優(yōu)先級(jí)相同級(jí)別的情況下，系統(tǒng)按照最后一次定義的屬性為標(biāo)準(zhǔn)。下面覆蓋上面的

原因:瀏覽器解釋html 語(yǔ)言的方式是從上往下，從左往右的解釋，通過(guò)解釋完所有樣式得出最終結(jié)果才會(huì)顯示出來(lái)。

總結(jié)

以上是生活随笔為你收集整理的详解css样式处理的优先级的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。