CSS中選擇器的優先順序

2021-07-31 05:23:15 字數 1133 閱讀 1991

選擇器優先順序的一些問題

#box div

.important_false

.important_true

這一行末使用important

這一行使用了important

這種情況下,顯示為   

首先css的優先順序順序:   tag中的style   

>

id     

>    

class  

>

tag     

>   

繼承的屬性 按同樣的順序

#box div 情況下:id+tag>class所以顯示紅色

#box 情況下: 則按照

越靠近優先順序越高

原則 ,所以顯示藍色

當父元素和子元素設定相同的樣式時,繼承的 權重很小,有的瀏覽器認為他是0.1,所以不加div顯示藍色,加上div時,顯示紅色。

當父元素和子元素設定相同的樣式時,繼承的 權重很小,但是比0大

另一測試**

上面**本意是通過想通過div2class來去掉li前面定義的點, 按照越靠近優先順序越高原則,  應該是應用  .div2class  中的定義, 但實際情況方點並沒有去掉.   並沒有應用 .div2class 還是按照 #div1 中的設定顯示.  這證明 id 的優先順序要高於 class.

總結一點經驗就是: 通過繼承來的屬性 id 的優先順序高於 class 

css的優先順序順序:   tag中的style   >   id     >     class  >  tag     >   繼承的屬性 按同樣的順序

關於css中選擇器優先順序的總結

開發中可能會遇到這樣的問題,在兩個css選擇器都能定位到某元素,但是瀏覽器按照哪個選擇器定義的樣式來渲染元素呢。這就是涉及到css選擇器優先順序的問題。css2.1的規範是這樣描述的 1.如果宣告來自 style 屬性,而不是帶有選擇器的規則,則記為1,都則記為0 a 這種樣式被稱之為內聯樣式,因為...

選擇器優先順序 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...