Lala Code

在使用 Next.js 搭配 next/image 與 react-fast-marquee 或自製跑馬燈動畫時，我遇到了一個難以捉摸的問題：圖片偶爾會「突然消失」，但只要滑鼠一動或按個鍵盤，它們又會神奇地出現。

這讓我一度以為是動畫套件的 bug、載入順序的問題，甚至懷疑是不是 React hydration 對不上。但最後真正的關鍵，其實是一組 CSS。

最近發現了一個超實用的工具！當我們在做多國語系網站時，通常需要安裝 i18n 套件來實現多語言支持。
不過，這樣的設置通常需要編寫代碼來顯示目前的語言，這樣會讓我們在開發過程中經常需要手動對照翻譯的文字。

在上一篇文章中，我們介紹了基本選擇器的優先順序。不過開發中也經常遇到多個選擇器的組合時（如 ul li 、 div.appx a 等），或遇到一些套件的樣式，想改樣式卻怎麼蓋都蓋不掉，這時候樣式的優先級計算變得更加重要。本篇文章將進一步說明如何計算這些複合選擇器的權重，以便更好地控制和覆蓋樣式。

在前面的 28 天，我們介紹了多種選擇器，包括基本選擇器、複合選擇器、偽類選擇器、偽元素，接下來要進入到樣式的優先級（Specificity），本篇文章將會先以基本選擇器來說明，並理解優先級對於編寫可維護的 CSS 至關重要。

::before 和 ::after 是 CSS 偽元素，主要用於在不改變 HTML 結構的情況下，在元素的前後插入內容或樣式（例如文字、符號或圖片）。這些偽元素經常被用來添加裝飾性或輔助性的信息，讓開發者可以靈活控制頁面元素的外觀。

在現代網頁中，如果內容高於瀏覽器或是元素區塊的高度，會出現滾動條方便瀏覽，一般瀏覽器預設為灰色的樣式。

在前面我們探討了偽類選擇器，接下來我們將進一步了解「偽元素」選擇器。

偽元素允許開發者選取並操控元素中特定的部分或內容，這樣可以在不改變 HTML 結構的情況下，實現更靈活的設計。偽元素的語法是以雙冒號 :: 開頭，本文將介紹三個實用的偽元素：::first-letter、::first-line 和 ::selection，它們特別適合在文章段落中使用。

之前我們介紹了如何使用 :focus & :focus-visible 來處理表單的焦點效果，這次我們要來看當表單元素被禁用時如何應用樣式 :disabled，以及如何利用 :enabled 為啟用狀態設置樣式。

除了結構偽類外，還有一些可以控制外觀的「UI 偽類」，UI 偽類選擇器專門用於選擇與用戶介面元素狀態相關的元素，如複選框、單選框等。這些選擇器能夠根據元素的狀態進行樣式調整。

本篇將會介紹 :checked ，用於表單中複選框、單選框被選中的樣式。

:not 選擇器可以選取不符合指定選擇器的元素，主要功能是排除符合特定選擇器的元素，這讓我們能夠將樣式應用於那些不符合條件的元素，也稱為是「反選偽類」或「否定偽類」(negation pseudo-class)。