潜入 CSS 大海：掌握选择器、层叠与盒模型的核心法则CSS 大海：核心知识点梳理什么是 CSS？一个属性与值组成的

CSS 大海：核心知识点梳理

什么是 CSS？

一个属性与值组成的键值对称为声明。
示例：color: red;
多个声明组合在一起，用大括号 {} 包裹，构成声明块。
声明块要作用到具体的 HTML 元素上，需要通过选择器来指定目标元素。
多条 CSS 规则（选择器 + 声明块）共同组成一张样式表。

层叠（Cascading）

当多个规则作用于同一个元素时，浏览器根据优先级决定最终应用哪条样式。
优先级计算方式按“个十百千”位：
- 元素选择器（如 p）：1（个位）
- 类选择器、属性选择器、伪类（如 .class、[type="text"]、:hover）：10（十位）
- ID 选择器（如 #id）：100（百位）
- 行内样式（style=""）：1000（千位）
!important 优先级最高，但应避免滥用。

示例：

html
预览
<div id="main" class="container">
  <p>这是一个段落</p>
</div>

对应样式：

css
编辑
p { color: blue; }
.container p { color: red; }
#main p { color: green; }

最终文字颜色为绿色，因为 #main p 优先级最高。

盒模型与布局细节

margin 重叠：相邻块级元素的上下 margin 会合并，取其中较大的值。
小数单位 px：浏览器通常会进行亚像素渲染，但在某些设备上可能被舍入处理。
inline 元素限制：
- inline 元素（如 <span>）不具备完整盒模型，不支持 transform。
- 解决方案：将其设为 display: inline-block 或使用 position: absolute。

CSS 选择器类型与用法

1. 属性选择器

css
编辑
[data-category="科幻"] { background-color: #007bff; }
[title^="入门"] h2::before { content: "🌟"; }

[attr=value]：精确匹配属性值
[attr^=value]：属性值以指定字符串开头

2. 兄弟与后代选择器

A + B：选择紧接在 A 后的第一个同级 B 元素（直接相邻兄弟）
A ~ B：选择 A 后所有同级的 B 元素（通用兄弟）
.parent > child：仅选择直接子元素
.parent child：选择所有后代元素

3. 伪类选择器

css
编辑
button:hover { background-color: yellow; }
input:focus { border: 2px solid blue; }
li:not(:last-child) { margin-bottom: 10px; }
li:nth-child(odd) { background-color: lightgray; }

常用伪类包括：:hover、:focus、:checked、:not()、:nth-child() 等。

4. `:nth-child()` 与 `:nth-of-type()` 的区别

:nth-child(n)：选中父元素下的第 n 个子元素，且该元素必须是指定类型
:nth-of-type(n)：选中父元素下第 n 个指定类型的元素，忽略其他类型

示例：
html
预览
<div class="container">
  <h1>标题</h1>
  <p>段落1</p>
  <div>其他</div>
  <p>段落2</p>
  <p>段落3</p>
</div>
.container p:nth-child(5)：选中第 5 个子元素（是 <p>）→ 段落3

.container p:nth-of-type(3)：选中第 3 个 <p> → 段落3

5. 伪元素

用于在元素前后插入装饰性内容：

css
编辑
.more::before {
  content: '';
  /* ... */
}
.more::after {
  content: "\2192";
  /* ... */
}

常见伪元素：::before、::after、::selection

样式来源与作用范围

外联样式：通过 <link> 引入外部 CSS 文件
内嵌样式：写在 <style> 标签中
行内样式：直接写在 HTML 元素的 style 属性中（优先级高，但不推荐频繁使用）

示例优先级对比：

css
编辑
.text p { color: red; }        /* 10 + 1 = 11 */
div p { color: blue; }         /* 1 + 1 = 2 */
#main p { color: green; }      /* 100 + 1 = 101 */
.container #main p { color: orange; } /* 10 + 100 + 1 = 111 */

最终颜色由优先级最高的规则决定。

CSS 如同一片广阔的大海，掌握其基础规则与细节技巧，方能自如航行于网页开发的浪潮之中。

潜入 CSS 大海：掌握选择器、层叠与盒模型的核心法则