在CSS中,我們可以使用選擇器來篩選并定義需要樣式的元素。
一、基本選擇器
p { color: blue; }
使用標簽名稱作為選擇器,這樣所有的同名標簽都會應用這些樣式。
二、類選擇器
.blue { color: blue; }
在HTML中,添加class屬性,然后使用"."+類名的方式定義樣式。這樣可以對特定的元素應用相同的樣式,而不影響其他元素。
三、ID選擇器
#red { color: red; }
使用ID選擇器時需要在HTML中給該元素添加id屬性,然后使用"#" + id名的方式定義樣式。在整個文檔中,每個id只能出現一次。
四、后代選擇器
div p { color: green; }
使用空格來表示選擇器之間的父子關系,這樣樣式將僅適用于某個元素的后代元素。
五、同級選擇器
p ~ span { color: orange; }
使用"~"來表示同級選擇器,這意味著樣式將應用于選擇器之后出現的同級元素。
六、屬性選擇器
a[] { color: purple; }
可以根據元素的屬性值來選擇元素,使用方括號"[屬性名=屬性值]"來定義選擇器。
除了以上選擇器,還有偽元素選擇器、狀態選擇器、全局選擇器等等。
在CSS中,選擇器的靈活應用可以減少冗余樣式,提高代碼的復用性和可維護性。當我們需要對頁面樣式進行修改時,只需調整相關的樣式表,而不影響其他地方的元素樣式。