在CSS中，选择器用于选择HTML元素，以便对这些元素应用样式。选择器有多种类型，可以根据不同的需求和具体情况来选择使用。以下是几种常见的CSS选择器：

1. 基本选择器

• 元素选择器：选择所有指定的元素。
  css

  复制代码

  p { color: blue; }

• 类选择器：选择所有指定类的元素，类名以.开头。
  css

  复制代码

  .class-name { color: green; }

• ID选择器：选择具有指定ID的元素，ID以#开头。
  css

  复制代码

  #id-name { color: red; }

• 通配符选择器：选择所有元素。
  css

  复制代码

  * { margin: 0; padding: 0; }

2. 组合选择器

• 后代选择器：选择元素内的所有后代元素。
  css

  复制代码

  div p { color: purple; }

• 子选择器：选择元素内的所有直接子元素。
  css

  复制代码

  div > p { color: orange; }

• 相邻兄弟选择器：选择紧接在指定元素后的兄弟元素。
  css

  复制代码

  h1 + p { color: pink; }

• 一般兄弟选择器：选择指定元素之后的所有兄弟元素。
  css

  复制代码

  h1 ~ p { color: brown; }

3. 属性选择器

• 存在属性选择器：选择包含指定属性的元素。
  css

  复制代码

  a[target] { color: cyan; }

• 等于属性选择器：选择属性等于某值的元素。
  css

  复制代码

  a[target="_blank"] { color: darkblue; }

• 包含词属性选择器：选择属性包含某词的元素。
  css

  复制代码

  [title~="flower"] { color: yellow; }

• 以指定值开头属性选择器：选择属性以某值开头的元素。
  css

  复制代码

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

• 以指定值结尾属性选择器：选择属性以某值结尾的元素。
  css

  复制代码

  a[href$=".pdf"] { color: lightgreen; }

• 包含子串属性选择器：选择属性包含某子串的元素。
  css

  复制代码

  a[href*="example"] { color: magenta; }

4. 伪类选择器

• 链接伪类：用于链接的不同状态。
  css

  复制代码

  a:link { color: blue; } a:visited { color: purple; } a:hover { color: red; } a:active { color: orange; }

• 结构伪类：用于选择特定结构的元素。
  css

  复制代码

  p:first-child { color: gold; } p:last-child { color: silver; } p:nth-child(2) { color: lime; } p:nth-of-type(odd) { color: olive; } p:only-child { color: teal; }

5. 伪元素选择器

• ::before：在元素内容之前插入内容。
  css

  复制代码

  p::before { content: "Before: "; color: gray; }

• ::after：在元素内容之后插入内容。
  css

  复制代码

  p::after { content: " After"; color: gray; }

• ::first-letter：选择元素的第一个字母。
  css

  复制代码

  p::first-letter { font-size: 200%; color: navy; }

• ::first-line：选择元素的第一行。
  css

  复制代码

  p::first-line { font-weight: bold; color: maroon; }

这些选择器可以单独使用，也可以组合使用，以便更精确地选择元素并应用样式。在实际项目