css的優先級的相關內容

之前也遇到過有關css優先級方面的問題，忽然發現之前瞭解不夠具體，知道了一些新的知識，還有不少不足，但願你們批評指正。

css樣式鏈接到html的方式可分爲內部和外部；內部樣式有行內樣式和嵌入樣式兩種，外部樣式分爲導入式和連接式兩種。

咱們先來探討這四種方式的html編譯的前後順序：

head：

<link rel="stylesheet" type="text/css" href="red.css">
<style>

@import url(blue.css);
.top{color: yellow;}
</style>

 

body：
<div style="color:green;" class="top" >

 toptop

</div>

實現的色彩是綠色，即行間的樣式是最優先

通過實驗驗證，另外三種，根據編譯的順序是從上到下規則，實現的效果是最下面的那個；

在html內部的樣式分佈，是咱們平時常常用到的，考慮到的。

首先import！，它是css1定義的語法，可是在IE6中是不能實現的，這就是IE6的幾大hack之一，不過在別的瀏覽器中優先級是最大的。

接着咱們再來聊一下，平時用的css語法的優先級（即他們對應的權重）

內聯樣式（即行內樣式）：1000

id選擇器：100

類選擇器（class）：10

元素選擇器（p,span）：1

舉個簡單的例子：

head：

<style>
.top{color: yellow;}
.top span{ color:blue;}
.top span.main{color:red;}
</style>

body：

<div class="top">
<span class="main">toptop</span>
</div>

顯示的字體顏色爲紅色，即遵照下面原則，數字越大，優先級越大

.top 10

.top span  10+1

.top span.main 10+1+10