Lala Code

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

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

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

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

上篇介紹了選取第一與最後的元素，那我們是否可以選取中間的元素呢？當然也是可以的！

當我們處理 HTML 結構時，可以使用虛擬類別選擇器(偽類選擇器)來選中特定位置的元素，這類偽類稱為「結構偽類」。

上一篇介紹了游標互動的 :hover 狀態，其實鍵盤同樣可以與網頁互動！這篇將帶大家了解焦點效果 :focus 與 :focus-visible，幫助你更好地控制使用者與網站的互動體驗。

接下來我們來介紹「偽類選擇器（Pseudo-class Selector）」，也叫「虛擬類別選擇器」。這些選擇器的作用是針對元素在特定狀態下的樣式進行設定。雖然名字裡有「類」，但其實它們不是傳統意義上的類別，而是元素的一種特殊狀態，能夠讓你選擇那些在HTML中無法直接定位的狀態或特徵。

這些偽類通常用冒號 : 後接狀態名稱來表示。

:hover 是我們最常見的偽類選擇器，用於選擇鼠標懸停在元素上的狀態。

通用兄弟選擇器（Subsequent-sibling Combinator）用於選擇指定元素之後的所有符合條件的兄弟元素。

相鄰兄弟選擇器（Next-Sibling Combinator）用於選中指定元素緊接在後的第一個兄弟元素，忽略其他不緊接的兄弟元素。