CSS有哪些常用的选择器？

1. 元素选择器

• 简介：通过HTML元素名称选择元素

• 语法：element

• 示例：p { color: red; }

• 功能：选择所有指定类型的HTML元素

2. 类选择器

• 简介：通过class属性选择元素

• 语法：.classname

• 示例：.highlight { background: yellow; }

• 功能：选择具有指定class属性的所有元素

3. ID选择器

• 简介：通过id属性选择元素

• 语法：#idname

• 示例：#header { font-size: 24px; }

• 功能：选择具有指定id属性的唯一元素

4. 通配符选择器

• 简介：选择所有元素

• 语法：*

• 示例：* { margin: 0; }

• 功能：匹配文档中的所有元素

5. 属性选择器

• [attribute]

• [attribute=value]

• [attribute~=value]

• [attribute|=value]

• [attribute^=value]

• [attribute$=value]

• [attribute*=value]

• 简介：通过属性选择元素

• 语法：

• 示例：a[target="_blank"] { color: blue; }

• 功能：根据属性及其值选择元素

6. 后代选择器

• 简介：选择嵌套在另一个元素内的元素

• 语法：ancestor descendant

• 示例：div p { line-height: 1.5; }

• 功能：选择指定祖先元素内的所有后代元素

7. 子元素选择器

• 简介：选择直接子元素

• 语法：parent > child

• 示例：ul > li { list-style: none; }

• 功能：只选择作为直接子元素的元素

8. 相邻兄弟选择器

• 简介：选择紧接在另一个元素后的元素

• 语法：element + sibling

• 示例：h1 + p { margin-top: 0; }

• 功能：选择紧接在指定元素后的第一个兄弟元素

9. 通用兄弟选择器

• 简介：选择所有在另一个元素后的兄弟元素

• 语法：element ~ sibling

• 示例：h1 ~ p { color: gray; }

• 功能：选择指定元素后的所有兄弟元素

10. 伪类选择器

• :hover

• :active

• :focus

• :visited

• :first-child

• :last-child

• :nth-child()

• 简介：选择元素的特定状态

• 语法：:pseudo-class

• 常见伪类：

• 示例：a:hover { text-decoration: underline; }

• 功能：根据元素状态选择元素

11. 伪元素选择器

• ::before

• ::after

• ::first-letter

• ::first-line

• ::selection

• 简介：选择元素的特定部分

• 语法：::pseudo-element

• 常见伪元素：

• 示例：p::first-letter { font-size: 200%; }

• 功能：选择元素的特定部分进行样式化

12. 组合选择器

• 简介：组合多个选择器

• 语法：selector1, selector2

• 示例：h1, h2, h3 { font-family: Arial; }

• 功能：同时选择多个元素应用相同样式