選擇器優先順序的一些問題
#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...