必须记住的 30 类 CSS 选择器

在前端开发中，CSS 选择器是必不可少的一部分。了解并熟练掌握常用的 CSS 选择器可以帮助我们更加高效地编写样式，并减少代码量。下面是必须记住的 30 类 CSS 选择器。

基本选择器

1. 元素选择器

元素选择器是最基础的选择器之一，它选取 HTML 标签元素作为选择器的对象。

p {
  color: red;
}

2. ID 选择器

ID 选择器使用 # 符号加上 HTML 元素的 id 属性来选取特定的元素。

#header {
  background-color: black;
  color: white;
}

3. 类选择器

类选择器使用 . 符号加上 HTML 元素的 class 属性来选取特定的元素。

.warning {
  color: orange;
  font-weight: bold;
}

4. 通配符选择器

通配符选择器选取所有 HTML 元素，使用 * 符号表示。

* {
  margin: 0;
  padding: 0;
}

层次选择器

5. 后代选择器

后代选择器选取指定标签元素内部的所有子元素。

ul li {
  list-style: none;
}

6. 子选择器

子选择器选取指定标签元素的直接子元素。

ul > li {
  list-style: none;
}

7. 相邻兄弟选择器

相邻兄弟选择器选取指定标签元素后面紧跟着的一个兄弟元素。

h1 + p {
  font-size: 16px;
}

8. 通用兄弟选择器

通用兄弟选择器选取指定标签元素后面所有的兄弟元素。

h1 ~ p {
  font-size: 16px;
}

属性选择器

9. 存在属性选择器

存在属性选择器选取具有指定属性的元素，不考虑属性值。

a[target] {
  color: blue;
}

10. 值属性选择器

值属性选择器选取具有指定属性且属性值等于某个值的元素。

input[type="text"] {
  border: 1px solid black;
}

11. 子串匹配属性选择器

子串匹配属性选择器选取具有指定属性且属性值中包含某个字符串的元素。

a[href*="example.com"] {
  color: green;
}

12. 后缀匹配属性选择器

后缀匹配属性选择器选取具有指定属性且属性值以某个字符串结尾的元素。

img[src$=".jpg"] {
  border: 1px solid red;
}

13. 前缀匹配属性选择器

前缀匹配属性选择器选取具有指定属性且属性值以某个字符串开头的元素。

a[href^="https://"] {
  color: blue;
}

伪类选择器

14. :hover

:hover 伪类选择器在鼠标悬停时应用样式。

a:hover {
  text-decoration: underline;
}

15. :active

:active 伪类选择器在元素被点击时应用样式。

.button:active {
  background-color: gray;
}

16. :focus

:focus 伪类选择器在元素获得焦点时应用样式。

input:focus {
  outline: none;
  border: 1px solid

> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/309) ，转载请注明来源
[https://www.javascriptcn.com/post/309](https://www.javascriptcn.com/post/309)