Lala Code

Lala 的前端大補帖,歡迎一起鑽研前端技術😊

0%

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

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

閱讀全文 »
❤️
❤️

Specificity

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

閱讀全文 »
❤️

Specificity

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

閱讀全文 »
❤️
❤️
❤️

::first-letter & ::first-line & ::selection

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

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

閱讀全文 »
❤️
❤️

checked

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

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

閱讀全文 »
❤️
❤️