CSS選擇器分為基礎(chǔ)選擇器和組合選擇器,在這里我們首先來(lái)介紹一下基礎(chǔ)選擇器的命名方式。
/* 通用選擇器 */ * { margin: 0; padding: 0; } /* 標(biāo)簽選擇器 */ p { color: #333; } /* ID選擇器 */ #header { background-color: #ccc; } /* 類(lèi)選擇器 */ .intro { font-size: 24px; } /* 屬性選擇器 */ input[type="text"] { border: 1px solid #999; } /* 偽類(lèi)選擇器 */ a:hover { color: red; }
通用選擇器使用*
符號(hào),表示匹配任意元素。標(biāo)簽選擇器以標(biāo)簽名稱命名,匹配所有使用該標(biāo)簽名稱的元素。ID選擇器以#
符號(hào)開(kāi)頭,匹配使用該ID名稱的唯一元素。類(lèi)選擇器以.
符號(hào)開(kāi)頭,匹配使用該類(lèi)名稱的所有元素。屬性選擇器以[]
符號(hào)包裹屬性名和屬性值,可以根據(jù)元素的屬性選擇相應(yīng)的元素。偽類(lèi)選擇器以:
符號(hào)開(kāi)頭,表示元素的特殊狀態(tài),如:hover
表示鼠標(biāo)懸浮時(shí)的狀態(tài)。
基礎(chǔ)選擇器的命名方式簡(jiǎn)單明了,可以根據(jù)需求選擇相應(yīng)的選擇器,用于精準(zhǔn)地控制頁(yè)面元素樣式。