目录

一、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

六、属性选择器

1. 基础语法

2. 分类详解

七、权重与优先级

1. 权重计算规则

2. 权重比较原则

3. 优先级排序（从高到低）

4. 组合选择器叠加示例

---

一、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;
  }

---

六、属性选择器

属性选择器允许根据元素的属性（attribute）或属性值来精准定位元素，无需依赖类名或 ID。

1. 基础语法

属性选择器的基本格式为：

[attribute] { /* 匹配具有指定属性的元素 */ }
[attribute="value"] { /* 精准匹配属性值 */ }
[attribute~="value"] { /* 匹配属性值包含指定单词（空格分隔） */ }
[attribute|="value"] { /* 匹配属性值以指定单词开头（完整单词或加连字符） */ }
[attribute^="value"] { /* 匹配属性值以指定字符串开头 */ }
[attribute$="value"] { /* 匹配属性值以指定字符串结尾 */ }
[attribute*="value"] { /* 匹配属性值包含指定子字符串 */ }

---

2. 分类详解

1. 存在性选择器

匹配 具有指定属性 的元素，不关心属性值。

/* 所有带有 title 属性的元素 */
[title] {
  border: 1px solid gray;
}

2. 精准匹配 (=)

属性值必须 完全等于 指定字符串。

/* 匹配 type="submit" 的按钮 */
input[type="submit"] {
  background: blue;
}

---

七、权重与优先级

CSS选择器的权重与优先级决定了当多个规则作用于同一个元素时，哪个样式会最终生效。

1. 权重计算规则

权重由4个层级组成（从高到低）：

1. 内联样式（style属性）：权重值 1000

2. ID选择器（#id）：权重值 0100

3. 类/伪类/属性选择器（.class, :hover, [type="text"]）：权重值 0010

4. 元素/伪元素选择器（div, ::before）：权重值 0001

5. 通配符/继承样式（*, 继承的样式）：权重值 0000

注意：权重不是十进制数值，而是按层级逐位比较（如 0-1-0 比 0-0-12 优先级高）。

---

2. 权重比较原则

1. 层级比较：从左到右逐级比较，高位相等时才比较低位。

2. 叠加规则：组合选择器的权重是各部分的权重之和。

3. !important：直接覆盖所有其他规则（慎用）。

4. 源码顺序：权重相同时，后定义的样式生效。

---

3. 优先级排序（从高到低）

1. !important

2. 内联样式（style="..."）

3. ID选择器（#id）

4. 类/伪类/属性选择器（.class, :hover）

5. 元素/伪元素选择器（div, ::before）

6. 通配符/继承样式（*）

---

4. 组合选择器叠加示例

示例1：类 + 元素

div.card:hover { ... }  
/* 解析：1个元素(div) + 1个类(.card) + 1个伪类(:hover) */
/* 权重：0-0-2-1 */

示例2：ID + 多个类

#sidebar .menu-item.active { ... }  
/* 解析：1个ID(#sidebar) + 2个类(.menu-item, .active) */
/* 权重：0-1-2-0 */

示例3：嵌套元素链

table tr td.highlight { ... }  
/* 解析：3个元素(table, tr, td) + 1个类(.highlight) */
/* 权重：0-0-1-3 */

示例4：属性选择器 + 伪元素

input[type="text"]::placeholder { ... }  
/* 解析：1个元素(input) + 1个属性([type="text"]) + 1个伪元素(::placeholder) */
/* 权重：0-0-1-2 */

示例5：通配符不参与权重

body * .icon { ... }  
/* 解析：通配符(*)权重为0，剩下1个元素(body) + 1个类(.icon) */
/* 权重：0-0-1-1 */

---