目录

一、CSS 选择器

1. 标签选择器

2. 类选择器

3. ID 选择器

4. 通配符选择器

5. 其他常用选择器

6. 选择器优先级

二、复合选择器

1. 后代选择器（空格）

2. 子选择器（>）

3. 相邻兄弟选择器（+）

4. 通用兄弟选择器（~）

5. 群组选择器（,）

三、伪类选择器

1. 状态伪类

2. 结构伪类

3. 表单伪类

四、结构伪类选择器

1. :first-child 与 :last-child

2. :nth-child(n) 与 :nth-last-child(n)

3. :nth-of-type(n) 与 :nth-last-of-type(n)

4. :only-child 与 :only-of-type

五、伪元素选择器

1. ::before 与 ::after

2. ::first-line 与 ::first-letter

3. ::selection

---

一、CSS 选择器

选择器用于指定 CSS 样式规则的应用对象，以下是核心选择器及用法：

1. 标签选择器

• 语法：标签名 { 样式 }

• 作用：选择所有指定 HTML 标签。

• 示例：

  p {color: blue; /* 所有段落文本为蓝色 */
  }

2. 类选择器

• 语法：.类名 { 样式 }

• 作用：选择所有具有相同 class 属性的元素。

• 示例：

  .highlight {background-color: yellow; /* 高亮背景 */
  }

  <span class="highlight">重要内容</span>

3. ID 选择器

• 语法：#id名 { 样式 }

• 作用：选择唯一具有指定 id 的元素。

• 示例：

  #header {font-size: 24px; /* 页面头部字体大小 */
  }

  <div id="header">网站标题</div>

4. 通配符选择器

• 语法：* { 样式 }

• 作用：选择页面所有元素。

• 示例：

  * {margin: 0; /* 清除所有元素的外边距 */
  }

5. 其他常用选择器

• 后代选择器：父元素 子元素（如 div p 选择所有在 div 内的段落）。

• 子选择器：父元素 > 子元素（仅直接子元素）。

• 相邻兄弟选择器：元素 + 元素（如 h1 + p 选择紧接在 h1 后的第一个段落）。

6. 选择器优先级

• 权重顺序：!important > 行内样式 > #id > .class > 标签 > 通配符。

• 避免过度使用 !important，推荐通过优化选择器结构管理优先级。

---

二、复合选择器

复合选择器通过组合多个简单选择器实现更精确的元素定位。

1. 后代选择器（空格）

• 语法：祖先选择器 后代选择器 { 样式 }

• 作用：选择所有嵌套在祖先元素内的后代元素。

• 示例：

  div p { color: red;  /* div 内的所有段落文本变红 */
  }

2. 子选择器（>）

• 语法：父选择器 > 子选择器 { 样式 }

• 作用：仅选择直接子元素。

• 示例：

  ul > li {list-style: none;  /* 仅清除 ul 的直接子 li 的项目符号 */
  }

3. 相邻兄弟选择器（+）

• 语法：前一个选择器 + 后一个选择器 { 样式 }

• 作用：选择紧接在前一个元素后的第一个兄弟元素。

• 示例：

  h1 + p {margin-top: 0;  /* 紧接在 h1 后的第一个段落顶部无外边距 */
  }

4. 通用兄弟选择器（~）

• 语法：前一个选择器 ~ 后续兄弟选择器 { 样式 }

• 作用：选择前一个元素之后的所有同级元素。

• 示例：

  h2 ~ p {font-style: italic;  /* h2 之后的所有段落变为斜体 */
  }

5. 群组选择器（,）

• 语法：选择器1, 选择器2 { 样式 }

• 作用：同时为多个选择器应用相同样式。

• 示例：

  h1, h2, h3 {font-family: "Arial", sans-serif;
  }

---

三、伪类选择器

伪类选择器用于定义元素的特定状态或结构位置。

1. 状态伪类

• :hover：鼠标悬停时触发。

• :active：元素被激活（如点击）时生效。

• :focus：元素获得焦点时（如表单输入）。

• :visited：已访问的链接。

• :checked：选中的复选框或单选按钮。

• 示例：

  a:hover {color: #ff4500;  /* 链接悬停时变为橙色 */
  }
  input:focus {border-color: blue;  /* 输入框聚焦时边框变蓝 */
  }

2. 结构伪类

• :first-child：父元素的第一个子元素。

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

• :nth-child(n)：第 n 个子元素（支持公式如 2n+1）。

• :nth-of-type(n)：同类型中的第 n 个元素。

• :not(selector)：排除匹配选择器的元素。

• 示例：

  li:nth-child(odd) {background: #f0f0f0;  /* 奇数行列表项背景变灰 */
  }
  p:not(.warning) {color: #333;  /* 非警告类段落文本为深灰色 */
  }

3. 表单伪类

• :disabled：禁用状态的表单元素。

• :required：必填字段。

• 示例：

  input:disabled {opacity: 0.5;  /* 禁用输入框半透明 */
  }

---

四、结构伪类选择器

结构伪类选择器根据元素在文档树中的位置或结构关系进行选择。

1. :first-child 与 :last-child

• 作用：选择父元素的第一个或最后一个子元素。

• 示例：

  ul li:first-child { color: red;  /* 列表的第一个项变红 */
  }
  ul li:last-child {font-weight: bold;  /* 列表的最后一项加粗 */
  }

2. :nth-child(n) 与 :nth-last-child(n)

• 作用：选择父元素的第 n 个子元素（正向或逆向计数）。

• 参数：

  • 数字：如 2 选择第二个元素。

  • 公式：如 2n+1（奇数项）、even（偶数项）。

• 示例：

  tr:nth-child(2n) {background: #f5f5f5;  /* 表格偶数行背景变灰 */
  }
  tr:nth-last-child(1) {border-bottom: none;  /* 最后一行无底部边框 */
  }

3. :nth-of-type(n) 与 :nth-last-of-type(n)

• 作用：选择同类型元素中的第 n 个（正向或逆向计数）。

• 示例：

  article:nth-of-type(3) {border: 2px solid blue;  /* 第三个 article 元素加蓝色边框 */
  }

4. :only-child 与 :only-of-type

• 作用：

  • :only-child：选择作为父元素唯一子元素的元素。

  • :only-of-type：选择父元素中唯一类型的元素。

• 示例：

  div p:only-child {color: green;  /* 当 div 内只有一个 p 时生效 */
  }

---

五、伪元素选择器

伪元素选择器用于在元素内容前后插入虚拟元素或修饰特定部分。

1. ::before 与 ::after

• 作用：在元素内容的前面或后面插入内容（需配合 content 属性）。

• 示例：

  .price::before {content: "¥";  /* 价格前添加货币符号 */color: #ff4500;
  }
  .tooltip::after {content: attr(data-tip);  /* 通过 data 属性动态显示提示 */display: none;position: absolute;
  }

2. ::first-line 与 ::first-letter

• 作用：

  • ::first-line：选择元素的首行文本。

  • ::first-letter：选择元素的首字母。

• 示例：

  p::first-line {font-weight: bold;  /* 段落首行加粗 */
  }
  p::first-letter {font-size: 2em;  /* 首字母放大 */float: left;
  }

3. ::selection

• 作用：自定义用户选中文本的样式。

• 示例：

  ::selection {background: #ffb7b7;  /* 选中文本背景为粉色 */color: #000;
  }

---