CSS 中的高级选择器

在使用 CSS 样式表时，我们通常使用简单的选择器来选择页面上的元素，如标签、ID、类等。但是，在实际开发中，选择器的需求可能会更加复杂，需要使用到高级选择器。

1. 通用选择器

通用选择器（*）可以匹配文档中的任何元素。例如，下面的样式将为页面上的所有元素设置边框：

* {
  border: 1px solid black;
}

2. 子选择器

子选择器（>）只匹配直接子元素。例如，下面的样式将会选择所有 div 直接子元素中的所有 p 元素：

div > p {
  color: red;
}

3. 相邻兄弟选择器

相邻兄弟选择器（+）匹配同级的下一个兄弟元素。例如，下面的样式将为所有 h2 元素之后的第一个 p 设置样式：

h2+p {
  font-size: 1.2em;
}

4. 一般兄弟选择器

一般兄弟选择器（~）匹配上一个兄弟元素之后的所有兄弟元素。例如，下面的样式将为所有 h3 元素后面的所有 p 设置样式：

h3~p {
  color: blue;
}

5. 属性选择器

属性选择器可以根据元素的属性名和属性值来选择元素。例如，下面的样式将为 href 属性值以 https 开头的所有链接设置样式：

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

6. 伪类选择器

伪类选择器可以根据元素的状态或位置来选择元素。例如，下面的样式将为被鼠标悬停的链接设置样式：

a:hover {
  text-decoration: underline;
}

7. 伪元素选择器

伪元素选择器可以在元素的内容前或后插入一些内容或样式。例如，下面的样式将在每个 p 元素的内容前插入一个蓝色的大写字母“P”：

p::before {
  content: "P";
  color: blue;
  font-size: 1.5em;
}

以上就是 CSS 中的高级选择器。它们可以帮助我们更灵活地选择页面上的元素，并为这些元素设置样式。在实际开发中，应选择最适合需求的选择器，避免不必要的样式冲突。