鐵人檔案
為什麼選不到元素？為什麼改不動樣式？你曾經有這些疑問嗎？本次主題將由淺入深探討 CSS 選擇器的各種類型，我們該如何使用這些選擇器，來精確控制網頁元素的樣式，同時掌握選擇器優先級的運作原理，確保樣式設定能夠如預期生效。
:root 選擇器主要用來針對 HTML 文件的根元素（即 <html>），這與直接使用 html 元素選擇器有些許不同。兩者雖然選擇的都是同一個...
如果元素中沒有任何子元素或內容(包括空白符)時，我們可以透過 :empty 選擇器來定義樣式。 💠:empty 基本用法 語法 選擇器:empty { 屬性...
:not 選擇器可以選取不符合指定選擇器的元素，主要功能是排除符合特定選擇器的元素，這讓我們能夠將樣式應用於那些不符合條件的元素，也稱為是「反選偽類」或「否定...
除了結構偽類外，還有一些可以控制外觀的「UI 偽類」，UI 偽類選擇器專門用於選擇與用戶介面元素狀態相關的元素，如複選框、單選框等。這些選擇器能夠根據元素的狀...
之前我們介紹了如何使用 :focus & :focus-visible 來處理表單的焦點效果，這次我們要來看當表單元素被禁用時如何應用樣式 :disa...
在前面我們探討了偽類選擇器，接下來我們將進一步了解「偽元素」選擇器。 偽元素允許開發者選取並操控元素中特定的部分或內容，這樣可以在不改變 HTML 結構的情況...
在現代網頁中，如果內容高於瀏覽器或是元素區塊的高度，會出現滾動條方便瀏覽，一般瀏覽器預設為灰色的樣式。 但有時候網站的風格，跟預設的滾動條樣式，與網站的整體...
::before 和 ::after 是 CSS 偽元素，主要用於在不改變 HTML 結構的情況下，在元素的前後插入內容或樣式（例如文字、符號或圖片）。這些偽...
在前面的 28 天，我們介紹了多種選擇器，包括基本選擇器、複合選擇器、偽類選擇器、偽元素，接下來要進入到樣式的優先級（Specificity），本篇文章將會先...
在上一篇文章中，我們介紹了基本選擇器的優先順序。不過開發中也經常遇到多個選擇器的組合時（如 ul li 、 div.appx a 等），或遇到一些套件的樣式，...
