通用兄弟選擇器(Subsequent-sibling Combinator)用於選擇指定元素之後的所有符合條件的兄弟元素。
❤️
Day11-相鄰兄弟選擇器-兄弟情深,只挑最近的!
❤️
Day10-子代選擇器-鎖定直系血親,選擇不含糊
❤️
Day9-後代選擇器-傳承的力量,輕鬆選中後代元素
後代選擇器(Descendant Combinator)用於選擇特定元素中的所有子孫元素,無論是直接的子元素還是更深層次的後代。當你需要對一個範圍內的所有元素應用相同的樣式時,它非常實用。
❤️
Day8-選擇器列表-多重選擇,一次完成!
❤️
Day7-交集選擇器-一次選擇,多重考量
接下來會開始介紹各種複合選擇器,複合選擇器是指將多個基本選擇器組合在一起,我們可以更精確地選擇特定的 HTML 元素。這些選擇器可以基於元素的類別、結構、層次關係等條件來篩選元素,本篇將聚焦於交集選擇器。
❤️
Day6-屬性選擇器-尋找標籤中的屬性
屬性選擇器(Attribute Selectors)用於選中符合屬性值條件的 HTML 元素,HTML 元素上會有一些屬性,例如 <a>
標籤有 title
屬性,我們就可以針對有 title
屬性的 <a>
元素來進行樣式設置。
❤️
Day5-ID 選擇器-僅此一家,別無分號
ID 選擇器(ID Selectors)是根據元素上的 id
屬性值作為判斷依據,大小寫需相符。
id
其實就是「身分 Identity」的縮寫,同一個 id
只能在頁面中出現一次,這就像我們每個人的身分證字號,都是唯一的。
❤️
Day4-類選擇器-前端切版最常使用的選擇器,精準鎖定
上一篇有講到,元素選擇器沒辦法讓相同的標籤進行不同的樣式,這時候就要靠類選擇器啦~!
類選擇器(Class Selectors)是前端切版最常使用到的選擇器,根據 HTML 元素的 class
屬性值來選擇特定的元素,其中 class
就有「類別」的含義。
❤️
Day3-元素選擇器-誰說標籤只是標籤
元素選擇器(Type Selectors)也可以稱作「標籤選擇器」。我們可以在 HTML 文件中,選擇任何的 HTML 元素,並對選中的標籤元素來處理樣式。不過,由於 <head>
部分的標籤(如 <meta>
, <title>
等)不會顯示在網頁的可見區域,因此對這些標籤的樣式設置不會產生效果。
❤️