CSS選擇器及其優先順序排序

css選擇器如下：

css的選擇器其實大類的話可以分為三類，即id選擇器、class選擇器、標籤選擇器。

用法如下：

其中，他們之間又可以以不同的方式進行組合，如下：

完整css選擇器參考手冊

下面列表中，選擇器型別的優先順序是遞增的：

型別選擇器（type selectors）（例如, h1）和 偽元素（pseudo-elements）（例如, ::before）

類選擇器（class selectors） (例如,.example)，屬性選擇器（attributes selectors）（例如, [type=「radio」]），偽類（pseudo-classes）（例如, :hover）

id選擇器（例如, #example）

通配選擇符（universal selector）(*), 關係選擇符（combinators） (+, >, ~, 』 ') 和 否定偽類（negation pseudo-class）(:not()) 對優先順序沒有影響。（但是，在 :not() 內部宣告的選擇器是會影響優先順序）。

給元素新增的內聯樣式 (例如, style=「font-weight:bold」) 總會覆蓋外部樣式表的任何樣式 ，因此可看作是具有最高的優先順序。.

當在乙個樣式宣告中使用乙個!important 規則時，此宣告將覆蓋任何其他宣告。雖然技術上!important與優先順序無關，但它與它直接相關。

使用 !important 是乙個壞習慣，應該盡量避免，因為這破壞了樣式表中的固有的級聯規則 使得除錯找bug變得更加困難了。當兩條相互衝突的帶有 !important 規則的宣告被應用到相同的元素上時，擁有更大優先順序的宣告將會被採用。

取而代之，你可以：

更好地利用css級聯屬性

使用更具體的規則。在您選擇的元素之前，增加乙個或多個其他元素，使選擇器變得更加具體，並獲得更高的優先順序

優先順序就是分配給指定的css宣告的乙個權重，它由 匹配的選擇器中的 每一種選擇器型別的 數值 決定。

而當優先順序與多個css宣告中任意乙個宣告的優先順序相等的時候，css中最後的那個宣告將會被應用到元素上。

當同乙個元素有多個宣告的時候，優先順序才會有意義。因為每乙個直接作用於元素的css規則總是會接管/覆蓋（take over）該元素從祖先元素繼承而來的規則。

優先順序：由高到低(從上到下)

使用的規則也很簡單，就是 選擇器的權值加到一起，大的優先；如果權值相同，後定義的優先 。雖然很簡單，但如果書寫的時候沒有注意，很容易就會導致css的重複定義，**冗餘。比如

.divclass span 優先級別就是：10+1=11

樣式系統從最右邊的選擇符開始向左進行匹配規則。只要當前選擇符的左邊還有其他選擇符，樣式系統就會繼續向左移動，直到找到和規則匹配的元素，或者因為不匹配而退出。

如果你非常在意頁面的效能那千萬別使用css3選擇器。實際上，在所有瀏覽器中，用 class 和 id 來渲染，比那些使用同胞，後代選擇器，子選擇器（sibling, descendant and child selectors）對頁面效能的改善更值得關注。

完整css選擇器優先順序

CSS選擇器及其優先順序

標籤選擇器 tagname body 類選擇器 class id選擇器 id 通配選擇器 在css3中,星號 可以和命名空間組合使用 ns 會匹配ns命名空間下的所有元素 會匹配所有命名空間下的所有元素 會匹配所有沒有命名空間的元素 屬性選擇器 屬性選擇器通過已經存在的屬性名或屬性值匹配元素 語法 ...

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