博客站

CSS 选择器用于选择需要样式化的 HTML 元素。常见的 CSS 选择器类型包括：

1. 基本选择器

• 元素选择器：选择特定标签的元素。

  p {
      color: blue;
  }
  

• 类选择器：选择具有特定 class 属性的元素。

  .example {
      font-size: 14px;
  }
  

• ID 选择器：选择具有特定 id 属性的元素。

  #header {
      background-color: yellow;
  }
  

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

  * {
      margin: 0;
      padding: 0;
  }
  

2. 组合选择器

• 后代选择器：选择某个元素的后代元素。

  div p {
      color: red;
  }
  

• 子元素选择器：选择某个元素的直接子元素。

  div > p {
      color: green;
  }
  

• 相邻兄弟选择器：选择紧接在某个元素后的兄弟元素。

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

• 通用兄弟选择器：选择某个元素后的所有兄弟元素。

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

3. 属性选择器

• 存在属性选择器：选择具有特定属性的元素。

  a[target] {
      color: purple;
  }
  

• 属性值选择器：选择属性值等于特定值的元素。

  a[href="https://example.com"] {
      color: orange;
  }
  

• 属性值包含选择器：选择属性值包含特定字符串的元素。

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

4. 伪类选择器

• 状态伪类：根据元素的状态选择元素。

  a:hover {
      color: red;
  }
  

• 结构伪类：根据元素在文档中的位置选择元素。

  li:first-child {
      font-weight: bold;
  }
  

5. 伪元素选择器

• 伪元素：选择元素的特定部分。

  p::first-line {
      font-size: 24px;
  }
  

总结

• 基本选择器：元素、类、ID、通配符
• 组合选择器：后代、子元素、相邻兄弟、通用兄弟
• 属性选择器：存在、属性值、属性值包含
• 伪类选择器：状态、结构
• 伪元素选择器：元素的特定部分

这些选择器可以单独或组合使用，以实现精确的样式控制。