CSS选择器

🌱 基本选择器

🔗 组合选择器

🎯 属性选择器

✨ 伪类选择器

💡 伪元素选择器

选择器的“权重”（Specificity）

🧮 选择器权重计算规则

✨ 示例对比

/* 权重：(0,0,1,1) → 类 + 标签 */
.box p {}

/* 权重：(0,1,0,0) → ID */
#main {}

/* 权重：(0,0,1,0) → 类选择器 */
.container {}

/* 权重：(0,0,1,1) → 类 + 伪元素 */
.card::after {}

在遇到冲突时，浏览器会优先使用权重更高的那条规则。如果权重一样，就按照后写的规则覆盖前写的。

🚨 小心权重陷阱

• 使用 !important 会直接打破规则优先级，尽量少用
• 权重过高会导致样式难以维护，建议采用合理的命名结构（比如 BEM 命名规范）
  当然可以，维！以下是 HTML 中常见的标签，按“行内标签（inline）”、“块标签（block）”和“行内块标签（inline-block）”的分类整理：

标签分类

🧱 块级标签（Block-level Elements）

块级标签通常独占一行，默认会在前后换行，用于构建页面结构。

• <div>：通用容器标签
• <p>：段落
• <h1> 至 <h6>：标题
• <ul> / <ol> / <li>：无序/有序列表及其项
• <table> / <thead> / <tbody> / <tr> / <td>：表格结构
• <form> / <fieldset>：表单
• <section> / <article> / <nav> / <aside> / <header> / <footer>：HTML5 语义化结构
• <blockquote>：长引用内容
• <hr>：水平分隔线
• <pre>：保留格式的文本（如代码块）

✏️ 行内标签（Inline Elements）

行内标签不会打断文本流，常用于修饰文本或插入小组件。

• <span>：通用行内容器
• <a>：超链接
• <strong> / <b>：加粗
• <em> / <i>：斜体或强调
• <img>：图片
• <br>：换行符
• <input>（type 为 text、checkbox、radio 等）
• <label>：表单标签
• <abbr> / <cite> / <code> / <time>：文本内语义标签

⚖️ 行内块标签（Inline-block Elements）

这种标签结合了块级和行内的特点：不换行但可以设置宽高。

常见标签中默认是行内块的较少，主要通过 CSS 设置：

• <button>：按钮（默认是 inline-block）
• <img>：虽然是 inline，但表现为 inline-block（可设宽高）
• <input>：部分类型表现为 inline-block
• <select> / <textarea>：下拉框和多行输入框
• <video> / <canvas> / <iframe>：媒体元素，具有可设置尺寸特性
• 自定义标签或元素通过 display: inline-block 指定也归为此类

字体相关设置

🔤 字体家族（Font Family）

• font-family: 设置字体名称，如 "Arial", "Helvetica", sans-serif，通常指定多个字体，后备字体用逗号分隔。

p {
  font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
}

🔠 字体大小与单位（Font Size）

• font-size

  设置字体大小，可用单位：

  • px：像素，固定大小
  • em / rem：相对单位（相对于父元素或根元素）
  • %：相对于父元素

h1 {
  font-size: 2rem;
}

🧬 字体粗细（Font Weight）

• font-weight

  控制文字粗细，常用值：

  • 关键字：normal、bold、lighter、bolder
  • 数值：100 到 900（例如 400 为 normal，700 为 bold）

span {
  font-weight: 600;
}

✍️ 字体样式（Font Style）

• font-style

  主要控制斜体

  • normal
  • italic
  • oblique

em {
  font-style: italic;
}

📐 字体行高（Line Height）

• line-height: 设置行间距，推荐使用无单位数字（如 1.5 表示 1.5 倍的字体大小）

p {
  line-height: 1.6;
}

🔣 字体变形（Text Transform & Decoration）

• text-transform: 控制字母大小写
  • uppercase（全大写）| lowercase（全小写）| capitalize（单词首字母大写）
• text-decoration: 控制文字修饰，如下划线、删除线等
  • none | underline | line-through | overline

h2 {
  text-transform: capitalize;
  text-decoration: underline;
}

⌨️ 快捷整合写法：font

/* 顺序: font-style font-variant font-weight font-size/line-height font-family */
p {
  font: italic small-caps bold 16px/1.5 "Helvetica", sans-serif;
}

文本相关设置

🧭 文本对齐（Text Alignment）

• text-align

  ：设置文本的水平对齐方式

  • 常用值：left、right、center、justify（两端对齐）

p {
  text-align: justify;
}

🪄 文本装饰（text-decoration）与转换（text-transform）

• text-decoration：文字修饰，如下划线、删除线等
  • none | underline | line-through | overline
• text-transform：控制字母大小写
  • none | uppercase（全大写）| lowercase（全小写）| capitalize（单词首字母大写）

h2 {
  text-decoration: underline;
  text-transform: capitalize;
}

📏 文本缩进（text-indent）与行距（line-height）

• text-indent：首行缩进
• line-height：行间距，推荐使用相对值（如 1.5）

p {
  text-indent: 2em;
  line-height: 1.8;
}

🔂 文本换行与溢出处理

• white-space

  ：处理空格和换行方式

  • 如：normal、nowrap、pre、pre-line、pre-wrap

• word-break

  ：如何断词换行（特别适用于中英文混排）

  • normal | break-all | keep-all

• overflow-wrap（旧称 word-wrap）

  ：强制长单词换行

  • normal | break-word

div {
  white-space: pre-wrap;
  word-break: break-all;
}

🔍 字母（letter-spacing）与单词间距（word-spacing）

• letter-spacing：字母间距
• word-spacing：单词间距

span.title {
  letter-spacing: 1px;
  word-spacing: 0.5em;
}

🔧 垂直对齐（适用于 inline元素）

• vertical-align：垂直方向上的对齐方式（如 baseline、top、middle、bottom）