Lala Code

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

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

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

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

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

子代選擇器（Child Combinator）用於選中指定元素中的直接子元素。與後代選擇器不同，子代選擇器只會選擇直接子元素，而不包括更深層次的後代元素。

後代選擇器（Descendant Combinator）用於選擇特定元素中的所有子孫元素，無論是直接的子元素還是更深層次的後代。當你需要對一個範圍內的所有元素應用相同的樣式時，它非常實用。

選擇器列表（Selector List），又稱「分組選擇器」或「並集選擇器」，允許多個選擇器共享相同的樣式。

接下來會開始介紹各種複合選擇器，複合選擇器是指將多個基本選擇器組合在一起，我們可以更精確地選擇特定的 HTML 元素。這些選擇器可以基於元素的類別、結構、層次關係等條件來篩選元素，本篇將聚焦於交集選擇器。

屬性選擇器（Attribute Selectors）用於選中符合屬性值條件的 HTML 元素，HTML 元素上會有一些屬性，例如 <a> 標籤有 title 屬性，我們就可以針對有 title 屬性的 <a> 元素來進行樣式設置。

ID 選擇器（ID Selectors）是根據元素上的 id 屬性值作為判斷依據，大小寫需相符。

id 其實就是「身分 Identity」的縮寫，同一個 id 只能在頁面中出現一次，這就像我們每個人的身分證字號，都是唯一的。

上一篇有講到，元素選擇器沒辦法讓相同的標籤進行不同的樣式，這時候就要靠類選擇器啦~！

類選擇器（Class Selectors）是前端切版最常使用到的選擇器，根據 HTML 元素的 class 屬性值來選擇特定的元素，其中 class 就有「類別」的含義。