css優先順序及其對應的權重

2022-06-08 04:33:10 字數 450 閱讀 2140

1.選擇器的優先順序

!important>內聯選擇器(style)>id選擇器》類選擇器 | 屬性選擇器 | 偽類選擇器 > 元素選擇器》萬用字元(*)

2.選擇器的權重(通過權重計算可以避免許多問題)

!important

10000

內聯選擇器

1000

id選擇器

100類選擇器

10元素選擇器

1eg:body #sum 結果:100+1=101。

ps:!important在某些時候會失效(當然能不用!imortant就不要用)

eg:box{

width:100px!important;

min-width:200px;    

這個時候!important會失效,最終的寬度會是200px。

CSS權重以及優先順序

權重的級別劃分包含了所有的css選擇器 如果兩個選擇器作用在同乙個元素上,則權重高者生效 權重的級別根據選擇器被分為四個分類 行內樣式,id,類和屬性,以及元素。當很多規則都被應用到某乙個元素上時,全中決定了那種規則生效。每個選擇器都有自己的權重。每個css規則,都包含了乙個權重級別。如果兩個選擇器...

CSS的優先順序和權重

css樣式優先順序遵循如下 行內樣式 id選擇器 類選擇器 元素選擇器 在選擇器優先順序相同的情況下,遵循就近原則。頁面某元素在多層巢狀情況下,根據權重大小顯示,權重越大優先顯示。備註 important 表示強制應用該樣式,例如 button,與以上的選擇器相遇時,強制使用此樣式 選擇器類別 說明...

CSS樣式優先順序及權重

一 什麼是繼承性?作用 給父元素設定一些屬性,子元素也可以使用,這個我們就稱之為繼承性。color red p div 的 color red 屬性,這個屬性將被 繼承,即 也擁有屬性 color red 直接樣式 比 祖先樣式 優先順序高。類名為 son 的 div 的 color 為 blue ...