官方表述的css樣式優先順序如下：
通用選擇器（*） <那麼，我們來舉個例子：元素(型別)選擇器 < 類選擇器 < 屬性選擇器 < 偽類 < id
選擇器 < 內聯樣式
html**：
<引入乙個style.css樣式：div
class
="img-div"
>
<
img
src="images/icon.png"
class
="img"
id="img"
alt="img"
style
="width:50px"
/>
div>
<在style.css樣式中寫入link
type
="text/css"
rel="stylesheet"
href
="css/style.css"
/>
*.imgimg[alt="img"] img:hoverimg#img開啟html可以發現
圖1 ↑
可見內聯式的樣式權重要高於外部引用，那麼我們把內聯的style樣式去掉，顯示大小如圖2：
圖2↑ 圖3↑ 圖4↑
同樣是外部引用的樣式，id比其他的都要優先，把#img的樣式去掉，效果如圖3：效果是引用了屬性選擇器寬度為
300px
再把滑鼠移動上去效果如圖4。
以此類推，分別去掉屬性選擇器（圖4），類選擇器（圖5），元素選擇器（圖6）
圖4↑ 圖5↑ 圖6↑
再將外部引用的樣式複製到html中嵌入：
發現嵌入式的樣式權重都要高於外部引用，最後的優先順序如下：內聯嵌入
外部內聯1-
- id 選擇器-2
3偽類-4
5屬性選擇器-6
7類選擇器-8
9元素(型別)選擇器
-10
11 *
-12
13*上述**從小到大，數值越小越優先！
事實上，
css內部是按每條樣式的權重值來計算優先順序的，
各型別選擇器所對應的權重值如下：
元素, 偽元素: 1 – (0,0,0,1)也就相當於：類, 偽類, 屬性: 1 – (0,0,1,0)
id: 1 – (0,1,0,0)
內聯樣式: 1 – (1,0,0,0)
第一等：代表內聯樣式，如: style=」」，權值為1000。
第二等：代表id選擇器，如：#content，權值為100。
第三等：代表類，偽類和屬性選擇器，如.content，權值為10。
第四等：代表型別選擇器和偽元素選擇器，如div p，權值為1。
例項：
<div
class
="img-div"
id="img-div"
>
<
div
id="img-div1"
>
<
img
src="images/u484.png"
class
="img"
id="img"
alt="img"
/>
div>
div>
#img-div #img-div1 #img//300顯示結果：#img-div #img//200
#img//100
！important修改權重
如非特殊情況，慎用!important。因為使用!important會擾亂原本層疊和權重產生正常的作用順序，使後期維護帶來麻煩。
Css樣式優先順序問題
想要對乙個標籤處理它的樣式，可以用 class 的方式來定義它的類，然後在類中處理他的樣式 例如 html view plain copy print?style box style divclass box div 當然也可以用 id 或者乾脆直接對標籤寫樣式，然而如果把這些定義都放在了乙個元素中...
css樣式優先順序問題
官方表述的css樣式優先順序如下 通用選擇器 元素 型別 選擇器 類選擇器 屬性選擇器 偽類 id 選擇器 內聯樣式 css 偽類用於向某些選擇器新增特殊的效果屬性選擇器可以根據元素的屬性及屬性值來選擇元素。那麼，我們來舉個例子 html 引入乙個style.css樣式 在style.css樣式中寫...
css樣式優先順序問題
官方表述的css樣式優先順序如下 通用選擇器 元素 型別 選擇器 類選擇器 屬性選擇器 偽類 id 選擇器 內聯樣式 css 偽類用於向某些選擇器新增特殊的效果 屬性選擇器可以根據元素的屬性及屬性值來選擇元素。那麼，我們來舉個例子 html 引入乙個style.css樣式 在style.css樣式中...