鐵人檔案
為什麼選不到元素？為什麼改不動樣式？你曾經有這些疑問嗎？本次主題將由淺入深探討 CSS 選擇器的各種類型，我們該如何使用這些選擇器，來精確控制網頁元素的樣式，同時掌握選擇器優先級的運作原理，確保樣式設定能夠如預期生效。
相鄰兄弟選擇器（Next-Sibling Combinator）用於選中指定元素緊接在後的第一個兄弟元素，忽略其他不緊接的兄弟元素。 想像一下，家裡有大哥、二...
通用兄弟選擇器（Subsequent-sibling Combinator）用於選擇指定元素之後的所有符合條件的兄弟元素。 接著上次的家族故事，家裡的大哥、二...
接下來我們來介紹「偽類選擇器（Pseudo-class Selector）」，也叫「虛擬類別選擇器」。這些選擇器的作用是針對元素在特定狀態下的樣式進行設定。雖...
上一篇介紹了游標互動的 :hover 狀態，其實鍵盤同樣可以與網頁互動！這篇將帶大家了解焦點效果 :focus 與 :focus-visible，幫助你更好地...
當我們處理 HTML 結構時，可以使用虛擬類別選擇器(偽類選擇器)來選中特定位置的元素，這類偽類稱為「結構偽類」。 舉例來說，如果要固定在第一個<li&...
上篇介紹了選取第一與最後的元素，那我們是否可以選取中間的元素呢？當然也是可以的！ 比方說，你可以選擇第三個元素、所有奇數元素、所有偶數元素，甚至依據特定規則選...
在之前的文章中，我們介紹過 :first-child & :last-child 這兩個選擇器，可以用來選中第一個或最後一個元素。但本篇要介紹的 :f...
在先前的文章中，我們介紹了 :nth-child，它讓我們能根據所有同層元素的位置進行選取。而這次要介紹的 :nth-of-type，則是針對相同類型的元素進...
前面我們講到過 :last-child，它可以直接選中同層的最後一個元素，而 :nth-last-child 則讓我們能從最後開始計算，選取倒數的元素，這對於...
:only-child 選擇器可以用於選中在父元素中唯一的子元素，用白話來說就是獨生子女元素，常用在只有一個子元素時，可以為該唯一的元素添加特殊的樣式。同樣地...
