前言

CSS选择器是用来选择网页中一个或多个元素的模式。在CSS中，使用选择器来选取需要设置样式的HTML元素，然后通过CSS属性来设置这些元素的样式。可以使用CSS选择器来更改网站的外观，使其更加美观和易于阅读。以下是一些常见的CSS选择器:

1. 标签选择器（tag selector）

选择指定标记符的元素，如 div、p、h1 等。

div {
  color: #333;
  font-size: 16px;
}

2. 类选择器（class selector）

通过 class 属性选择元素。

.content {
  color: #666;
  font-size: 14px;
}

3. ID 选择器（id selector）

通过 id 属性选择元素。

#header {
  background-color: #333;
  color: #fff;
}

4. 后代选择器（descendant selector）

选择指定元素的所有后代元素。

.container p {
  color: #666;
  font-size: 14px;
}

5. 子元素选择器（child selector）

选择指定元素的直接子元素。

.container > p {
  color: #666;
  font-size: 14px;
}

6. 通配符选择器（universal selector）

匹配页面上的所有元素。

* {
  box-sizing: border-box;
}

7. 属性选择器（attribute selector）

选择含有特定属性值的元素。

a[target="_blank"] {
  color: #007aff; /* iOS blue */
}

8. 伪类选择器（pseudo-class selector）

选择元素特定的状态，如 hover、active 和 focus 等。

a:hover {
  text-decoration: underline;
}

9. 伪元素选择器（pseudo-element selector）

选择元素特定的位置，如 before 和 after 等。

h1::after {
  content: "!";
}

以上是一些常见的CSS选择器，使用它们可以快速地选择网页中的不同元素，并设置对应的样式。