学习目标

• 理解 CSS Ruleset 的完整结构：选择器 + 声明块

• 掌握 8+ 种常用选择器 的语法与应用场景

• 熟悉 声明 的组成：属性与值

• 能够运用 伪类 与 伪元素 实现动态和精细化样式

• 了解现代 CSS 布局模型（Flexbox、响应式设计）在规则集中的体现

什么是规则集

规则集 是 CSS 样式的基本单位，由两部分组成：

selector {
    property: value;
    property: value;
}

• 选择器：指定要样式化的 HTML 元素

• 声明块：用 {} 包裹，包含一个或多个 property: value; 声明

示例：

<style>
p {
    color: blue;
    font-size: 16px;
}
</style>

此规则集将所有 <p> 段落文字设为蓝色，字号 16px。

选择器类型

1. 通用选择器

* {
    font-family: sans-serif;
}

• 作用于页面中所有元素

• 常用于全局重置或统一字体

2. 类型选择器

h1 { font-size: 25px; }

• 按 HTML 标签名选择（如 div, p, span）

3. 类选择器

.alert { background-color: blueviolet; }

• 以 . 开头，可复用于多个元素

• HTML 中通过 class="alert" 应用

4. ID 选择器

#GFG { width: 200px; }

• 以 # 开头，唯一性，每个页面只能用一次

5. 分组选择器

h1, h2, h3 {
    color: green;
}

• 多个选择器共享同一套样式，用逗号分隔

6. 后代选择器

#one p { color: blueviolet; }

• 选中 #one 内部所有层级的 <p> 元素（包括嵌套子级）

7. 子选择器

#one > p { color: blueviolet; }

• 仅选中 #one 的直接子元素 <p>，不包括孙子级

关键区别：

• #one p → 所有后代 <p>

• #one > p → 仅第一层子 <p>

声明与常用属性

每条声明格式：property: value;

1. 颜色与背景

body {
    color: black;
    background-color: white;
    background-image: url('bg.jpg');
}

2. 字体与文本

h1 {
    font-size: 32px;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
}

3. 盒模型

div {
    margin: 20px;    /* 外边距 */
    padding: 10px;   /* 内边距 */
    border: 1px solid black;
}

4. 定位

.box {
    position: relative; /* 或 absolute / fixed / sticky */
    top: 10px;
    left: 20px;
}

5. Flexbox 布局

.container {
    display: flex;
    justify-content: center; /* 主轴居中 */
    align-items: center;     /* 交叉轴居中 */
}

6. 响应式设计(媒体查询)

@media (max-width: 600px) {
    body { font-size: 14px; }
}

高级选择器

属性选择器

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

• 选中具有特定属性或属性值的元素

伪类(基于状态)

伪元素(基于内容片段)

使用 双冒号 ::（现代标准）

组合使用：伪类 + 伪元素

button:hover::before {
    content: "🔥 ";
}

鼠标悬停时，在按钮文字前显示火焰图标

最佳实践

1. 优先使用类选择器：比 ID 更灵活，支持复用

2. 避免过度嵌套：如 body div ul li a span → 难维护且性能差

3. 语义化命名：.btn-primary 比 .red-button 更具描述性

4. 合理使用伪类 / 伪元素：减少额外 HTML 标签

5. 声明顺序建议：按“定位 → 盒模型 → 文本 → 其他”组织，提升可读性

思考题

1. 为什么说“后代选择器 div p 比子选择器 div > p 性能略低”？请从浏览器渲染机制角度简要解释。

2. 如何用一条规则实现“除第一个段落外，其余所有段落文字为灰色”？请写出对应的 CSS 选择器。

3. 在一个登录表单中，你打算如何结合 :focus、::placeholder 和 :invalid 伪类提升用户体验？请给出代码示例。