Lala Code

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 選擇器通常會用來定義全局變數，特別是在需要隨時調整樣式時非常方便。

閱讀全文 »

Day20-:only-child & :only-of-type 讓唯一的元素成為焦點

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

:only-child 選擇器可以用於選中在父元素中唯一的子元素，用白話來說就是獨生子女元素，常用在只有一個子元素時，可以為該唯一的元素添加特殊的樣式。同樣地，:only-of-type 則是選擇特定類型中唯一的子元素。

閱讀全文 »

Day19-:nth-last-child & :nth-last-of-type 從後數起！CSS 的倒數計算法

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

前面我們講到過 :last-child，它可以直接選中同層的最後一個元素，而 :nth-last-child 則讓我們能從最後開始計算，選取倒數的元素，這對於快速選取倒數幾個元素非常方便。同樣地，除了選取所有元素外，我們還有 :nth-last-of-type，可以專門選取同類型的元素。

閱讀全文 »

Day18-:nth-of-type 針對類型元素任你挑

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

在先前的文章中，我們介紹了 :nth-child，它讓我們能根據所有同層元素的位置進行選取。而這次要介紹的 :nth-of-type，則是針對相同類型的元素進行篩選。

閱讀全文 »

Day17-:first-of-type & :last-of-type 第一與最後的類型元素

發表於 2024-10-26 更新於 2024-10-27 分類於 CSS Disqus：

在之前的文章中，我們介紹過 :first-child & :last-child 這兩個選擇器，可以用來選中第一個或最後一個元素。但本篇要介紹的 :first-of-type 和 :last-of-type 與它們略有不同，這兩個選擇器可以更具體地針對同類型元素進行選取。讓我們來看看它們的應用差異。

閱讀全文 »