在上一篇文章中,我們介紹了基本選擇器的優先順序。不過開發中也經常遇到多個選擇器的組合時(如 ul li
、 div.appx a
等),或遇到一些套件的樣式,想改樣式卻怎麼蓋都蓋不掉,這時候樣式的優先級計算變得更加重要。本篇文章將進一步說明如何計算這些複合選擇器的權重,以便更好地控制和覆蓋樣式。
Day29-掌控 CSS 樣式優先級:避免衝突的關鍵技巧
在前面的 28 天,我們介紹了多種選擇器,包括基本選擇器、複合選擇器、偽類選擇器、偽元素,接下來要進入到樣式的優先級(Specificity),本篇文章將會先以基本選擇器來說明,並理解優先級對於編寫可維護的 CSS 至關重要。
Day28-::before & ::after 利用 CSS 偽元素增強網頁內容的魅力
::before
和 ::after
是 CSS 偽元素,主要用於在不改變 HTML 結構的情況下,在元素的前後插入內容或樣式(例如文字、符號或圖片)。這些偽元素經常被用來添加裝飾性或輔助性的信息,讓開發者可以靈活控制頁面元素的外觀。
Day27-::-webkit-scrollbar 自訂與眾不同的滾動條效果
在現代網頁中,如果內容高於瀏覽器或是元素區塊的高度,會出現滾動條方便瀏覽,一般瀏覽器預設為灰色的樣式。
Day26-::first-letter & ::first-line & ::selection 文章段落偽元素
在前面我們探討了偽類選擇器,接下來我們將進一步了解「偽元素」選擇器。
偽元素允許開發者選取並操控元素中特定的部分或內容,這樣可以在不改變 HTML 結構的情況下,實現更靈活的設計。偽元素的語法是以雙冒號 ::
開頭,本文將介紹三個實用的偽元素:::first-letter
、::first-line
和 ::selection
,它們特別適合在文章段落中使用。
Day25-:disabled & :enabled 表單元素啟用與禁用的完美搭配
之前我們介紹了如何使用 :focus & :focus-visible 來處理表單的焦點效果,這次我們要來看當表單元素被禁用時如何應用樣式 :disabled
,以及如何利用 :enabled
為啟用狀態設置樣式。
Day24-:checked 玩轉複選框和單選框的選中效果
除了結構偽類外,還有一些可以控制外觀的「UI 偽類」,UI 偽類選擇器專門用於選擇與用戶介面元素狀態相關的元素,如複選框、單選框等。這些選擇器能夠根據元素的狀態進行樣式調整。
本篇將會介紹 :checked
,用於表單中複選框、單選框被選中的樣式。
Day23-:not 不選擇的藝術,如何用 CSS 控制排除
:not
選擇器可以選取不符合指定選擇器的元素,主要功能是排除符合特定選擇器的元素,這讓我們能夠將樣式應用於那些不符合條件的元素,也稱為是「反選偽類」或「否定偽類」(negation pseudo-class)。
Day22-:empty 無聲的存在,掌控隱形的頁面空間
如果元素中沒有任何子元素或內容(包括空白符)時,我們可以透過 :empty
選擇器來定義樣式。
Day21-:root 從根開始掌控全局變數
:root
選擇器主要用來針對 HTML 文件的根元素(即 <html>
),這與直接使用 html
元素選擇器有些許不同。兩者雖然選擇的都是同一個元素,但 :root
擁有比 html
更高的優先權,因此,:root
選擇器通常會用來定義全局變數,特別是在需要隨時調整樣式時非常方便。