開發者在使用css進行網頁開發時需要使用選擇器來指定樣式要應用的元素，在開發時主要有以下幾種選擇器。
#foo
.bar
p
*
style
="color
: red
">
i'm redp
>
當計算優先順序時，我們可以使用0, 0, 0, 0四個數字對乙個選擇器的優先順序進行計算權重，這四個數字的從左至右優先順序遞減，也就是最左邊的一位優先順序最高。
在比較優先順序時，先看兩個選擇器不為0的最高位，位更高的優先，如1, 0, 0, 0選擇器優先順序高於0, 1, 0, 0的選擇器。
如果最高位相同，則比較最高位的大小，如果仍相同則比較下一位的大小，以此類推，如0, 2, 0, 0優先順序高於0, 1, 0, 0，0, 2, 1, 0優先順序高於0, 2, 0, 0。
那麼，如何將乙個如#foo .bar p這樣的選擇器轉化為四個數字的優先順序呢？規則如下：
style
="color
: red
">
i'm redp
>
/* 0, 2, 0, 0 */
#first #second
/* 0, 1, 0, 0 */
#second
"first"
>
"second"
>
hellop
>
div>
hello的顏色就會被渲染為紅色，因為第乙個選擇器的優先順序更高。
/* 0, 0, 2, 0 */
.one .two
/* 0, 0, 1, 0 */
.two
class
="one"
>
class
="two"
>
hellop
>
div>
class
="two"
>
worldp
>
hello會被渲染為綠色，world會被渲染為黃色。
/* 0, 0, 0, 2 */
div p
/* 0, 0, 0, 1 */
p
>
>
hellop
>
div>
>
worldp
>
hello會被渲染為橙色，world會被渲染為紫色。
我們再來看幾個id，class和tag被組合在乙個選擇器中時的例子：
/* 0, 1, 2, 1 */
#first .one.two > p
/* 0, 2, 1, 1 */
#first #second > div.one
class
="foo"
style
="color
: red;
">
hellop
>
class
="bar"
style
="color
: red;
">
worldp
>
.foo
.bar
!important的存在，使得例子中hello顯示為藍色，而world按優先順序規則顯示為紅色。
>
hellodiv
>
>
worldp
>
*
p
hello被*選擇器命中，渲染為紅色，world被優先順序更高的標籤選擇器命中，渲染為藍色。
>
>
hellospan
>
p>
p
*
*選擇器的內容，hello會被渲染為綠色，因為它繼承了父元素的樣式，與繼承相比，*選擇器優先順序更高，所以在這裡hello被渲染為黃色。 詳解CSS選擇器優先順序
css在使用選擇器對元素施加屬性的時候會有先後順序,包括特殊性和重要性等概念在內,這裡我們就來詳解css中的選擇器優先順序順序,需要的朋友可以參考下 特殊性是什麼 在對乙個html元素應用css樣式時，常常有很多種方法可以找到元素，比如 css code複製內容到剪貼簿 container clas...
選擇器優先順序 CSS選擇器優先順序總結
css選擇器優先順序這個問題，相信有點經驗前端都會認為非常簡單，但是我們今天還是來總結一下吧。相信大家應該很少直接在html頁面寫樣式吧，一般都是用link標籤匯入css樣式表。使用者自定義樣式表就是我們用link標籤引入的css樣式表，為了保持不同瀏覽器下樣式相同，所以我們的自定義樣式表一般都會覆...
CSS 選擇器優先順序
css優先順序包含四個級別 文內選擇器，id選擇器，class選擇器，元素選擇器 以及各級別出現的次數。根據這四個級別出現的次數計算得到css的優先順序。css優先順序的計算規則如下 頁面中直接設定style,加1,0,0,0 每個id選擇器 如 id 加0,1,0,0 每個class選擇器 如 c...