CSS 选择器详解
选择器决定了样式应用的范围，掌握它们能更精准地控制页面表现。
1. 基础选择器
- 标签选择器：直接针对 HTML 标签，例如
p {}或h1 {}。 - ID 选择器：针对唯一的 id 属性，如
#two {}。注意 ID 在页面中应唯一。 - 类选择器：用于一组元素，复用性高，例如
.warn {}。 - 通配选择符：
* {}，匹配所有元素，通常用于重置样式，但性能开销较大。
2. 组合与分组
- 包含选择符：表示被 e1 包含的 e2，如
table td，即 table 下的所有 td 元素。 - 选择符分组：将相同的样式定义用于多个选择符，用逗号分隔，如
p, div, .warning { 属性：值 }。 - 标签指定式：结合标签与 ID 或类，如
h1#content {}仅针对 id 为 content 的 h1 标签；h1.p1 {}针对 class 为 p1 的 h1 标签。 - 组合选择符：同时满足多个条件，如
h1.p1, #content h1 {}。
CSS 核心特性
继承与层叠
- 继承：子元素会自然继承父元素的某些样式属性（如颜色、字体）。
- 层叠：如果子元素定义了与父元素冲突的样式，子元素优先。此外，同级别样式表中，后定义的样式会覆盖先定义的。
样式优先级
优先级决定了最终生效的样式，遵循以下顺序：
- 来源优先级：内联样式 > 内部样式表 > 外部样式表 > @import 导入式。
- 作用范围：范围越小，优先级越高。
- 就近原则：离目标元素越近的定义权重越大。
注意：内联样式拥有最高优先级，但在实际开发中应尽量避免滥用，以保持代码可维护性。
CSS 精灵技术
主要用于优化性能。通过将多个图标合并到一张图片上，减少 HTTP 请求次数，从而降低服务器访问压力并加快页面加载速度。
布局方式
CSS 提供了三种主要的布局模式：
- 默认文档流：按照 HTML 元素的结构顺序依次显示。
- 浮动布局：通过
float属性实现元素横向排列，常用于导航栏或列表项。 - 定位布局：通过
position属性精确控制元素位置。
深入理解浮动
浮动会将块元素从文档流中分离出来，允许其与其他元素同行显示。例如，ul 与 li 默认为块级元素，若需在一行显示，常配合浮动使用。
清除浮动
当父元素未指定高度且子元素浮动时，父元素高度可能塌陷。清除浮动旨在消除这种影响，常见方案有：
- 添加空元素：在浮动元素后增加一个空的
div并设置clear: both。缺点是会增加 DOM 节点。
