CSS 中選擇器是用來選擇要樣式化的 HTML 元素的語法規則。在 CSS 中,有許多選擇器可供使用,不同的選擇器可以根據不同的規則來選擇元素。
其中最基本的選擇器就是標簽選擇器。標簽選擇器可以根據 HTML 元素的標簽名來選擇元素。
/* 選擇所有的 p 元素 */ p { color: red; }
除了標簽選擇器外,還有 class 選擇器和 ID 選擇器。class 選擇器可以根據 HTML 元素的 class 屬性來選擇元素,而 ID 選擇器可以根據 HTML 元素的 id 屬性來選擇元素。
/* 選擇 class 為 my-class 的所有元素 */ .my-class { font-size: 16px; } /* 選擇 ID 為 my-id 的元素 */ #my-id { background-color: yellow; }
除了這些基本選擇器外,CSS 還提供了許多其他的選擇器,例如后代選擇器、子元素選擇器、相鄰兄弟選擇器等。這些選擇器可以根據元素之間的關系來選擇元素。
/* 選擇 ul 元素下所有的 li 元素 */ ul li { list-style: disc; } /* 選擇父元素為 div 的所有 span 元素 */ div > span { font-weight: bold; } /* 選擇緊接在 h1 元素后的 p 元素 */ h1 + p { font-size: 18px; }
在使用選擇器時,我們需要根據具體的需求來進行選擇,避免出現過于復雜的選擇器。因為過于復雜的選擇器會導致代碼難以維護,也會增加頁面渲染的時間。