CSS中有一些特殊的選擇器,可以幫助我們更準確地選中頁面中的元素。這些選擇器包括屬性選擇器、偽類選擇器以及偽元素選擇器。
屬性選擇器的基本語法是使用方括號[]將屬性名和屬性值包裹起來,表示選擇具有該屬性的元素。例如:
/* 選擇所有具有class="example"屬性值的元素 */ [class="example"] { color: red; } /* 選擇所有href屬性以"https://"開頭的a元素 */ a[href^="https://"] { color: blue; }
偽類選擇器則通過添加特殊的冒號符號:來表示,表示選擇某個元素的特殊狀態。例如:
/* 選擇所有未被訪問過的a標簽(默認是藍色) */ a:link { color: red; } /* 選擇鼠標懸停在某個元素上的狀態 */ button:hover { background-color: yellow; } /* 選擇最后一個li元素 */ li:last-child { font-weight: bold; }
最后,偽元素選擇器則通過添加雙冒號符號::來表示,表示選擇某個元素的某個部分。例如:
/* 在所有標題前添加內容 */ h1::before { content: "<"; } /* 在段落后添加短線 */ p::after { content: "-"; }
這些特殊的選擇器可以讓我們更加精確地控制頁面樣式,提高代碼效率和可維護性。