CSS 選擇器權重

阿榮
發佈於前端
閱讀時間約 3 分鐘

CSS 樣式採用規則

當不同的 CSS 會影響同一個元素時,要怎麼判斷誰能被採用呢?先透過權重來判斷誰的優先度較高;那如果優先級相等,接著看順序,後面的樣式會覆蓋過前面的,口訣:「先看權重,再看誰後」。這裡的順序指的是 CSS 檔樣式被撰寫的順序,而不是 HTML 的 class 書寫順序。

如下面範例:權重相同,再來判斷 CSS 樣式順序 (HTML 故意寫相反順序,但不造成影響),最終套用的樣式會是藍字。

<!-- html --> 
<h1 class="blue red"></h1>
/* CSS */
​.red {
color: red;
}

​.blue {
color: blue;
}


樣式權重彙整 (大到小)

!important (1 - 0 - 0 - 0 - 0)

寫在 CSS 屬性後方

.red { 
color: red; !important
}

權如其名,!important 就是最重要的,優先級比其他樣式高,加了可以確保樣式勝出。看起來很好用?BUT!!如果加了,就很難再被其他樣式覆蓋,只能繼續用 !important 來壓過它,用太多彈性差且不好維護,應盡量避免使用。


Inline Styles (1 - 0 - 0 - 0)

寫在 HTML 標籤上的 style

<div style="color:blue"> inline styles </div>


id (0 - 1 - 0 - 0)

<h1 id="green">Hello World!</h1>

// CSS

#green {
color: green;
}


class / psuedo-class / attribute (0 - 0 - 1 - 0)

  1. class (0 - 0 - 1 - 0)
.myclass {
color: green;
}


  1. psuedo-class (0 - 0 - 1 - 0)
a:hover {
color: red;
}

這個範例除了 psuedo-class 外,還有a 標籤權重為 (0 - 0 - 0 - 1),總權重為 (0 - 0 - 1 - 1)。


  1. attribute (0 - 0 - 1 - 0)
[title="example"] {
font-style: italic;
}


element (0 - 0 - 0 - 1)

p {
color: blue;
}


* 通用選擇器/ 全站預設值 (0 - 0 - 0 - 0)

*{    
padding: 0
margin: 0
}


總結

!important > inline style > id> class=psuedo-class=attribute > element > *

資料來源

主要放程式學習筆記,分享 Creative Coding 相關內容、作品
留言0
查看全部
發表第一個留言支持創作者!
內建模組 path 介紹 | Node.js
閱讀時間約 1 分鐘
npm | Node.js
閱讀時間約 1 分鐘
Express Web | Node.js
閱讀時間約 1 分鐘
JavaScript Class
閱讀時間約 3 分鐘
你可能也想看
CSS 程式札記 : 選擇器在網頁中,每個按鈕、文字或圖片等都是通過 CSS 來設定它們的樣子,要做到這點,我們就需要用到 CSS 選擇器。本文會從最簡單的選擇器開始講起,讓你了解如何使用 CSS 選擇器。
Thumbnail
avatar
梧笙
2023-07-28
【自學程式】好用的 CSS 偽類選擇器 :nth-child() 與 :nth-of-type()相信透過之前的介紹,大家對於 CSS 選擇器(CSS selector)已經不陌生了,今天我們要來聊聊兩個在實務上非常好用的偽類(pseudo class )語法,他們分別是 :nth-child() 與 :nth-of-type(),在了解這兩個語法之前,我們首先要先來聊聊什麼是「偽類」呢?
Thumbnail
avatar
Vivian Yeh
2022-03-23
CSS 偽元素 before/after source code: E 提供兩個範例,其實before, after就如同字面上的意思,會在前後加上內容。 範例1簡單的在前後加上文字,如下所示,需特別注意,是在div內的範例1前後加上文字。 before/after除了可以加上文字以外,還可以作為裝飾效果。如範例2,利用position調
Thumbnail
avatar
Vic Lin
2021-11-27
CSS grid 達成類似 table colspan, rowspan 排版css display grid可以達到類似table span的排版效果,但還是有些差異,table的span其實是合併,css grid比較像是要佔幾格的意思。 如下程式碼為例,colspan是要往右合併的意思,因此會少一個td。 E css grid colspan sample code:
Thumbnail
avatar
Vic Lin
2021-11-20
css overflow-y: auto not working in iPad筆記一下,原本寫成overflow-y: auto,在windows chrome瀏覽器有y scroll bar,唯獨iPad沒有scroll bar,解法如下: overflow-y: scroll; -webkit-overflow-scrolling: touch; 本筆記參考: 1. h
avatar
Vic Lin
2021-10-07
【CSS 教學】什麼時候該使用 margin 、padding?前端都該要懂的盒模型! 對於前端初學者來說,在切版時會出現很多規則、不規則的網頁區塊,這時候我們會嘗試用各種相對定位、絕對定位、margin 或是 padding 的方式來進行網頁區塊的推擠。
Thumbnail
avatar
Vivian Yeh
2021-09-28
【CSS 教學】inline、block、inline-block 使用時機講解明明想要某個欄位的寬高為 200px,卻發現自己不知道為什麼怎麼更改都會改不動,又或者寬高更改了,卻沒有辦法與其他元素並列。 上述的狀況,通常都是在不熟悉 HTML display 特性而產生的狀況下才會出現⋯⋯
Thumbnail
avatar
Vivian Yeh
2021-09-07
【自學程式】什麼是CSS選擇器? 學習如何改變網頁內容的樣式與HTML不同,CSS是專門修改網頁內容「樣式」的程式語言,也就是說你沒有辦法透過CSS去新增網頁的文字或是圖片等相關的內容,但你可以透過HTML新增網頁內容後,再使用CSS去修改他的樣式,例如⋯⋯
Thumbnail
avatar
Vivian Yeh
2021-06-10
CSS的大於(>)、加號(+)、取代符號(~)有時我們會在CSS裡看到「>」、「+」、「~」這些符號的使用,它們到底有甚麼功用呢?  A.大於符號(>) 大於(>)就是選取底下直接的子元素。 以大於符號(.box > p)和空格(.box p)來做比較,先看以下例子: 使用空格的情況 .box p{ font-size:20px; color
Thumbnail
avatar
哩老師
2020-05-06
CSS選擇器的優先權順序CSS提供許多選擇器類型,當使用不同的選擇器時,套用樣式的優先權也會不同。 A.元素內的(行內)樣式>頁面內的(崁入)樣式>外部載入(串連) 元素內的(行內)樣式 例子: 頁面內的樣式(崁入樣式) 例子: 外部載入(串連) 例子: B.後設定>前設定 最後設定的樣式將蓋過之前設定的樣式 例子:
Thumbnail
avatar
哩老師
2020-05-06