Lala Code

Day27-::-webkit-scrollbar 自訂與眾不同的滾動條效果

發表於 2024-11-05 分類於 CSS Disqus：

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

Day26-::first-letter & ::first-line & ::selection 文章段落偽元素

發表於 2024-11-04 分類於 CSS Disqus：

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

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

閱讀全文 »

Day25-:disabled & :enabled 表單元素啟用與禁用的完美搭配

發表於 2024-11-04 分類於 CSS Disqus：

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

閱讀全文 »

Day24-:checked 玩轉複選框和單選框的選中效果

發表於 2024-11-02 分類於 CSS Disqus：

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

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

閱讀全文 »

Day23-:not 不選擇的藝術，如何用 CSS 控制排除

發表於 2024-11-01 分類於 CSS Disqus：

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

閱讀全文 »

Day22-:empty 無聲的存在，掌控隱形的頁面空間

發表於 2024-10-31 分類於 CSS Disqus：

如果元素中沒有任何子元素或內容(包括空白符)時，我們可以透過 :empty 選擇器來定義樣式。

閱讀全文 »

Day21-:root 從根開始掌控全局變數

發表於 2024-10-30 分類於 CSS Disqus：

:root 選擇器主要用來針對 HTML 文件的根元素（即 <html>），這與直接使用 html 元素選擇器有些許不同。兩者雖然選擇的都是同一個元素，但 :root 擁有比 html 更高的優先權，因此，:root 選擇器通常會用來定義全局變數，特別是在需要隨時調整樣式時非常方便。

閱讀全文 »