CSS规则集

CSS 规则集是 CSS 的基本构成单元，它定义了“哪些元素”应用“什么样式”。

---

规则集的结构

一个完整的 CSS 规则集包含两个部分：

1. 选择器 (Selector)：告诉浏览器“我要选中哪些元素”。
2. 声明块 (Declaration Block)：包含若干条样式声明，每条声明由 属性 (Property) 和 值 (Value) 构成。

基本语法：

css

选择器 {
  属性1: 值1;
  属性2: 值2;
  ...
}

• 选择器：决定规则应用到哪些元素。
• 花括号 {}：包裹声明块。
• 声明：每条声明由 属性: 值 组成，必须以分号 ; 结束。

---

示例

css

/* 规则集：为所有 <p> 元素设置文字样式 */
p {
  color: blue;          /* 属性：color，值：blue */
  font-size: 16px;      /* 属性：font-size，值：16px */
}

这里：

• p 是选择器 → 选中所有 <p> 元素。
• color: blue; 和 font-size: 16px; 是声明。

---

多个选择器共享规则

一个规则集可以有多个选择器，用逗号分隔：

css

h1, h2, h3 {
  font-family: "Helvetica", sans-serif;
  font-weight: bold;
}

这条规则会同时作用于 <h1>、<h2> 和 <h3>。

---

规则集与层叠 (Cascade)

当多个规则集作用在同一元素上时，浏览器会根据 层叠规则 来决定最终生效的样式：

• 优先级 (Specificity)：不同选择器权重不同（例如 #id > .class > element）。
• 来源顺序：相同优先级时，后写的规则会覆盖前写的。
• 重要性：带有 !important 的声明优先级最高。

---