css常用选择器及其用法：CSS常用选择器及其用法全解析

本文目录导读：

1. 标签选择器（元素选择器）
2. 类选择器
3. ID选择器
4. 通配符选择器
5. 后代选择器
6. 子元素选择器
7. 属性选择器
8. 伪类选择器
9. 伪元素选择器
10. 选择器组合

标签选择器（元素选择器）

语法：元素名 {}
作用： 选择所有指定HTML标签的元素。
示例：

p { /* 选择所有段落元素 */  
  color: blue;  
}  

类选择器

语法：.classname {}
作用： 选择具有指定类名的元素。
示例：

.highlight { /* 选择所有class="highlight"的元素 */  
  background-color: yellow;  
}  

ID选择器

语法：#idname {}
作用： 选择具有指定ID的元素。
示例：

#header { /* 选择id="header"的元素 */  
  font-size: 24px;  
}  

通配符选择器

语法：
作用： 选择所有HTML元素。
示例：

* { /* 选择所有元素 */  
  margin: 0;  
  padding: 0;  
}  

后代选择器

语法：父元素 后代元素 {}
作用： 选择所有指定元素的后代元素。
示例：

body p { /* 选择所有段落p元素，这些段落是body的后代 */  
  color: green;  
}  

子元素选择器

语法：父元素 > 子元素 {}
作用： 选择所有指定元素的直接子元素。
示例：

ul > li { /* 选择所有ul的直接子元素li */  
  list-style: square;  
}  

属性选择器

语法：元素[属性=值] {}
作用： 选择具有指定属性和值的元素。
示例：

input[type="text"] { /* 选择所有type属性为"text"的input元素 */  
  border: 1px solid black;  
}  

伪类选择器

语法：元素:pseudo-class {}
作用： 选择具有特定状态或位置的元素。
示例：

a:hover { /* 选择鼠标悬停的链接 */  
  color: red;  
}  

伪元素选择器

语法：元素::pseudo-element {}
作用： 选择元素的特定部分，如第一个字符或内容前缀。
示例：

p::first-letter { /* 选择段落的第一个字母 */  
  font-size: 24px;  
}  

选择器组合

语法：选择器1, 选择器2 {}
作用： 合并多个选择器，应用于多个元素。
示例：

h1, h2, h3 { /* 选择所有h1、h2、h3元素 */  
  color: purple;  
}