css的優先順序的相關內容

標籤：style   color   sp   div   問題   bs   html   ad   ef   

以前也遇到過有關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

 

css的優先順序的相關內容