CSS选择器详细讲解

CSS选择器

CSS（层叠样式表）选择器是用于选择和操作HTML元素的关键。选择器定义了规则应用于哪些部分的HTML文档。以下是CSS选择器的全面讲解，包括基本选择器、组合选择器、属性选择器、伪类选择器和伪元素选择器等。

1. 基本选择器

1.1 通配符选择器 (*)

选择页面上的所有元素。

* {
    margin: 0;
    padding: 0;
}

1.2 类型选择器（Type Selector）

选择所有指定类型的元素。

p {
    color: blue;
}

1.3 类选择器（Class Selector）

选择具有特定类属性的所有元素。类选择器前面使用点号 (.)。

.intro {
    font-size: 20px;
}

1.4 ID选择器（ID Selector）

选择具有特定ID属性的唯一元素。ID选择器前面使用井号 (#)。

#header {
    background-color: grey;
}

1.5 属性选择器（Attribute Selector）

选择具有特定属性的元素。

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

2. 组合选择器

2.1 后代选择器（Descendant Selector）

选择元素内部的所有指定元素，层次不限。用空格分隔。

div p {
    color: green;
}

2.2 子选择器（Child Selector）

选择作为指定元素的直接子元素。用 > 分隔。

ul > li {
    list-style: none;
}

2.3 相邻兄弟选择器（Adjacent Sibling Selector）

选择紧接在另一个指定元素后的元素。用 + 分隔。

h1 + p {
    margin-top: 0;
}

2.4 通用兄弟选择器（General Sibling Selector）

选择跟在另一指定元素后的所有同级元素。用 ~ 分隔。

h1 ~ p {
    color: red;
}

3. 属性选择器（Attribute Selector）

3.1 存在属性选择器

选择包含指定属性的元素。

a[title] {
    color: purple;
}

3.2 等于属性选择器

选择指定属性等于某值的元素。

input[type="radio"] {
    margin-right: 10px;
}

3.3 包含属性值选择器

选择指定属性包含某个子字符串的元素。

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

3.4 以特定值开头的属性选择器

选择指定属性以某个值开头的元素。

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

3.5 以特定值结尾的属性选择器

选择指定属性以某个值结尾的元素。

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

3.6 多个属性选择器

选择具有多个属性的元素。

input[type="text"][name="username"] {
    border: 2px solid blue;
}

4. 伪类选择器（Pseudo-class Selector）

伪类选择器用于选择元素的特定状态。

4.1 动态伪类选择器

• :hover：鼠标悬停状态。

  a:hover {
      color: red;
  }
  

• :active：激活状态（通常是鼠标点击时）。

  a:active {
      color: green;
  }
  

• :focus：获得焦点状态。

  input:focus {
      border-color: blue;
  }
  

4.2 结构伪类选择器

• :first-child：选择作为父元素的第一个子元素的元素。

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

• :last-child：选择作为父元素的最后一个子元素的元素。

  p:last-child {
      font-weight: bold;
  }
  

• :nth-child(n)：选择作为父元素的第n个子元素的元素。

  li:nth-child(2) {
      color: red;
  }
  

• :nth-of-type(n)：选择作为父元素的第n个特定类型的子元素。

  p:nth-of-type(2) {
      color: blue;
  }
  

4.3 其他常用伪类选择器

• :not(selector)：选择不匹配给定选择器的元素。

  p:not(.intro) {
      color: grey;
  }
  

• :checked：选择所有被选中的元素（如<input>）。

  input:checked {
      background-color: yellow;
  }
  

5. 伪元素选择器（Pseudo-element Selector）

伪元素选择器用于选择元素的一部分，并对其应用样式。

5.1 ::before

在元素内容之前插入内容。

p::before {
    content: "Note: ";
    color: red;
}

5.2 ::after

在元素内容之后插入内容。

p::after {
    content: " (end)";
    color: blue;
}

5.3 ::first-line

选择元素的第一行。

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

5.4 ::first-letter

选择元素的第一个字母。

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

6. 组合和优先级

选择器可以组合使用，并且优先级（Specificity）决定了当多个选择器匹配同一元素时，哪一个选择器的规则会被应用。

6.1 优先级规则

• 类型选择器和伪元素选择器（最低优先级）
• 类选择器、属性选择器和伪类选择器
• ID选择器
• 内联样式（最高优先级）

6.2 使用 !important

!important 声明用于强制覆盖所有其他规则，不推荐频繁使用。

p {
    color: black !important;
}

总结

CSS选择器是定义样式规则的基础，掌握各种选择器及其组合使用方法是编写高效、清晰、可维护的CSS的关键。了解选择器的优先级以及如何合理使用 !important 也非常重要。通过不断练习和实际应用，可以更好地掌握和运用这些选择器。