CSS 核心概念与选择器
在前端开发中，CSS（层叠样式表）是控制网页外观和布局的核心技术。以下是我整理的约 2000 字的学习笔记，涵盖核心知识点与实践体会。
一、CSS 基础结构：声明与选择器
CSS 的本质是一组声明（declaration） ，每个声明由属性（property）和 值（value）组成，例如 color: red;。多个声明被包裹在花括号 {} 中，形成一个声明块（declaration block） 。为了让这些样式作用于特定的 HTML 元素，我们需要使用**选择器（selector）**来"选中"目标元素。
例如，若想将 <h1> 标题设为蓝色，可写：
css
h1 { color: blue; }这里 h1 是元素选择器，{ color: blue; } 是声明块。
二、选择器优先级：从低到高
CSS 选择器存在明确的优先级规则，决定了当多个规则作用于同一元素时，谁最终生效。优先级按"个十百千"计算：
- 元素选择器（element） ：权重 1（如
p） - 类选择器（class） ：权重 10（如
.highlight） - ID 选择器（id） ：权重 100（如
#main） - 内联样式（inline style） ：权重 1000（如
<div style="color:red">） !important：最高优先级，可覆盖一切（但应慎用）
例如，若同时存在：
css
p {
color: blue;
} /* 权重 1 */
.book {
color: green;
} /* 权重 10 */
#novel {
color: purple;
} /* 权重 100 */
则 ID 选择器胜出。
三、伪类与伪元素：动态与装饰性样式
伪类（Pseudo-classes）
用于定义元素的特殊状态 ，如 :hover、:focus、:nth-child() 等。
a:hover：鼠标悬停链接时变色li:nth-child(odd)：选中奇数列表项button:active：按钮点击时样式变化
伪元素（Pseudo-elements）
用于创建不存在于 DOM 中的内容 ，如 ::before、::after、::first-line。
css
p::first-line { font-weight: bold; }
a::after { content: " ➡"; }注意：伪元素使用双冒号 ::（CSS3 规范），但单冒号 : 在旧浏览器中仍兼容。
四、nth-child 与 nth-of-type 的区别
这是初学者易混淆的一对选择器
:nth-child(n)：选中父元素下第 n 个子元素，无论类型。:nth-of-type(n)：选中父元素下第 n 个同类型元素。
例如：
css
/* 子元素有点乱的时候，nth-child 有问题 */
.container p:nth-child(1){
background-color: yellow;
color: black;
}
/* p标签同类型*/
.container p:nth-of-type(3){
background-color: yellow;
color: black;
}
</style>
</head>
<body>
<div class="container">
<h1>nth-child vs nth-of-type 示例</h1>
<p>这是一个段落。</p>
<div>这是一个div。</div>
<p>这是第二个段落。</p>
<p>这是第三个段落。</p>
<div>这是第二个div。</div>
</div>p:nth-child(1)：不匹配（第1个子元素是h1，不是 p）p:nth-of-type(3)：匹配"是第三个段落."（它是第3个 p 元素）
理解这一点对精确控制列表、表格等结构至关重要。
五、盒模型与 margin 重叠
CSS 盒模型由 content、padding、border、margin 组成。其中 margin 重叠（margin collapse） 是一个经典问题：
- 垂直方向上相邻块级元素的 margin 会合并，取较大值而非相加。
- 例如两个相邻
<p>元素，上 margin 为 20px，下 margin 为 30px，则实际间距为 30px，而非 50px。
解决方法包括：
- 使用 padding 代替部分 margin
- 创建 BFC（块级格式化上下文），如设置
overflow: hidden
六、单位与像素处理
CSS 支持多种长度单位，其中 px（像素）是最常用的绝对单位 。现代浏览器对小数 px（如 10.5px）通常会四舍五入或亚像素渲染，但不同设备表现可能不同。响应式设计中更推荐使用相对单位（如 em、rem、%、vw/vh）。
七、定位与 display 的交互
position: absolute 会使元素脱离文档流，并相对于最近的非 static 定位祖先元素定位。值得注意的是：
inline元素默认不支持transform和某些定位属性。- 若需对行内元素应用
transform或position: absolute，通常需先将其display改为inline-block或block。
例如，若有一个 <span> 需要旋转，必须：
css
span {
display: inline-block;
transform: rotate(10deg);
}
八、层叠（Cascading）与样式来源
CSS 的"C"即 Cascading（层叠），指样式如何从多个来源（用户代理、用户、作者）合并。规则包括：
- 重要性（
!important） - 来源（作者 > 用户 > 浏览器默认）
- 优先级（ID > class > element）
- 源码顺序（后写的覆盖先写的）
因此，良好的 CSS 架构应避免滥用 !important，而通过合理的选择器层级和模块化来管理样式。
九、实践建议
我总结以下最佳实践：
- 语义化 HTML + 类选择器：避免过度依赖 ID 或标签选择器。
- 慎用
!important：它会破坏层叠逻辑，增加维护成本。 - 理解盒模型 ：使用
box-sizing: border-box可简化尺寸计算。 - 测试跨浏览器行为：尤其涉及伪元素、flex/grid 布局时。
- 利用开发者工具：Chrome DevTools 可直观查看选择器匹配与样式覆盖情况。
结语
CSS 虽看似简单，但其背后的层叠、继承、盒模型、定位机制构成了复杂而精密的系统。掌握选择器优先级、理解 margin 重叠、区分伪类与伪元素，是写出健壮、可维护样式的基石。