:only-child
選擇器可以用於選中在父元素中唯一的子元素,用白話來說就是獨生子女元素,常用在只有一個子元素時,可以為該唯一的元素添加特殊的樣式。同樣地,:only-of-type
則是選擇特定類型中唯一的子元素。
Day19-:nth-last-child & :nth-last-of-type 從後數起!CSS 的倒數計算法
前面我們講到過 :last-child,它可以直接選中同層的最後一個元素,而 :nth-last-child
則讓我們能從最後開始計算,選取倒數的元素,這對於快速選取倒數幾個元素非常方便。同樣地,除了選取所有元素外,我們還有 :nth-last-of-type
,可以專門選取同類型的元素。
Day18-:nth-of-type 針對類型元素任你挑
在先前的文章中,我們介紹了 :nth-child,它讓我們能根據所有同層元素的位置進行選取。而這次要介紹的 :nth-of-type
,則是針對相同類型的元素進行篩選。
Day17-:first-of-type & :last-of-type 第一與最後的類型元素
在之前的文章中,我們介紹過 :first-child & :last-child 這兩個選擇器,可以用來選中第一個或最後一個元素。但本篇要介紹的 :first-of-type
和 :last-of-type
與它們略有不同,這兩個選擇器可以更具體地針對同類型元素進行選取。讓我們來看看它們的應用差異。
Day16-:nth-child 照著規則,所有元素任你選
Day15-:first-child & :last-child 輕鬆選中第一與最後的元素
當我們處理 HTML 結構時,可以使用虛擬類別選擇器(偽類選擇器)來選中特定位置的元素,這類偽類稱為「結構偽類」。
Day14-:focus & :focus-visible 掌控焦點,提升互動體驗!
上一篇介紹了游標互動的 :hover
狀態,其實鍵盤同樣可以與網頁互動!這篇將帶大家了解焦點效果 :focus
與 :focus-visible
,幫助你更好地控制使用者與網站的互動體驗。
Day13-:hover 游標懸停狀態,讓網頁更動態活潑
接下來我們來介紹「偽類選擇器(Pseudo-class Selector)」,也叫「虛擬類別選擇器」。這些選擇器的作用是針對元素在特定狀態下的樣式進行設定。雖然名字裡有「類」,但其實它們不是傳統意義上的類別,而是元素的一種特殊狀態,能夠讓你選擇那些在HTML中無法直接定位的狀態或特徵。
這些偽類通常用冒號 :
後接狀態名稱來表示。
:hover
是我們最常見的偽類選擇器,用於選擇鼠標懸停在元素上的狀態。
Day12-通用兄弟選擇器-前方無視,鎖定後排兄弟
通用兄弟選擇器(Subsequent-sibling Combinator)用於選擇指定元素之後的所有符合條件的兄弟元素。
Day11-相鄰兄弟選擇器-兄弟情深,只挑最近的!
相鄰兄弟選擇器(Next-Sibling Combinator)用於選中指定元素緊接在後的第一個兄弟元素,忽略其他不緊接的兄弟元素。