CSS
- 选择器
- 结构伪类选择器
- nth-child(公式)
- CSS 精灵
- 原理
- 步骤
- 适应环境
- 介绍
- less - 导入
- less - 导出
- 副标题：选择器、PxCook软件、盒子模型
选择器
结构伪类选择器
- 作用：根据元素的结构关系查找元素。
- 表格：
选择器 说明 E:first-child 查找第一个 E 元素 E:last-child 查找最后一个 E 元素 E:nth-child(N) 查找第 N 个 E 元素（第一个元素 N 值为1） - 代码示例：
li:first-child{background-color:green;}
：
01-结构伪类选择器-基本使用.html<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>结构伪类选择器-基本使用</title><style>/* li:first-child { background-color: green; } *//* li:last-child { background-color: green; } */li:nth-child(3){background-color:green;}</style></head><body><ul><li>li 1</li><li>li 2</li><li>li 3</li><li>li 4</li><li>li 5</li><li>li 6</li><li>li 7</li><li>li 8</li></ul></body></html>/* 第一个 *//* li:first-child { background-color: green; } *//* 最后一个 *//* li:last-child { background-color: green; } *//* 任意个 *//* li:nth-child(3) { background-color: green; } */li:nth-child(1){background-color:green;}nth-child(公式)
- 作用：根据元素的结构关系查找多个元素。
- 表格：
功能 公式 偶数标签 2n 奇数标签 2n+1; 2n-1 找到5的倍数的标签 5n 找到第5个以后的标签 n+5 找到第5个以前的标签 -n+5
CSS 精灵
CSS 精灵（也叫雪碧图）是一种网页优化技术，将多个小图标、小图片合并成一张单独的大图片，然后通过 CSS 的background-position属性定位显示其中的特定部分。
主要用于减少 HTTP 请求数量，提升网页加载速度，是前端性能优化的经典手段之一。
原理
网页中的每张图片都需要单独发起一次 HTTP 请求，当页面包含大量小图标（如按钮图标、导航图标、表情图标等）时，HTTP 请求数会显著增加，导致页面加载缓慢。CSS 精灵通过将所有小图片整合到一张图片文件中，只需一次 HTTP 请求即可加载所有图片资源，然后利用 CSS 的背景定位技术，只显示需要的部分。
CSS 的background相关属性是实现精灵图的关键：
- background-image：指定精灵图的 URL；
- background-position：通过 X 轴（水平）和 Y 轴（垂直）坐标定位精灵图中的具体图片（坐标值可正可负，负数表示向左 / 向上移动精灵图，以显示目标区域）；
background-repeat：通常设置为no-repeat，避免精灵图重复显示；
width/height：设置元素的尺寸，仅显示精灵图中对应大小的区域。
步骤
- 制作精灵图
首先需要将所有小图片合并成一张大图片，可使用 Photoshop、Fireworks、GIMP 等图像编辑软件，或在线工具（如 SpriteCow、SpriteSheetPacker、Iconfont 的雪碧图生成工具等）。
- 小图片之间保留一定的间距（避免定位时相邻图片重叠）；
- 按图片的使用场景或大小分类排列（便于后续定位）；
- 精灵图的格式优先选择 PNG（支持透明，压缩率高），简单图标也可使用 JPG 或 WebP（WebP 压缩率更高，现代浏览器支持良好）。
- 确定图片坐标
合并精灵图后，需要确定每个小图片在精灵图中的坐标（X、Y 轴偏移量）和尺寸（宽、高）。可通过图像编辑软件的标尺工具测量，或使用在线工具（如 SpriteCow）自动生成坐标和 CSS 代码。 - 编写 CSS 样式
通过 CSS 背景属性定位并显示目标图片，
HTML
<divclass="icon icon-home"></div><divclass="icon icon-user"></div><divclass="icon icon-settings"></div>CSS
/*假设精灵图sprites.png包含 home、user、settings 三个图标*/.icon{display:inline-block;background-image:url("sprites.png");background-repeat:no-repeat;}/* 首页图标：坐标X: 0px，Y: 0px，宽24px，高24px */.icon-home{width:24px;height:24px;background-position:0 0;}/* 用户图标：坐标X: -30px（向右偏移30px，避开home图标），Y: 0px，宽24px，高24px */.icon-user{width:24px;height:24px;background-position:-30px 0;}/* 设置图标：坐标X: 0px，Y: -30px（向下偏移30px，避开home图标），宽24px，高24px */.icon-settings{width:24px;height:24px;background-position:0 -30px;}适应环境
减少 HTTP 请求数：这是最核心的优势，尤其在 HTTP/1.1 协议下（HTTP/1.1 对同一域名的并发请求数有限制，通常为 6 个），减少请求数可显著提升页面加载速度；
降低图片总体积：合并后的精灵图体积通常小于所有小图片的体积之和（图片压缩算法对大图片的压缩效率更高，且减少了图片文件头、元数据等冗余信息）；
简化图片管理：将所有小图片整合到一个文件中，便于维护和更新（只需替换一张精灵图即可更新所有图标）；
减少图片闪烁：页面加载时，所有图标一次性加载完成，避免了逐个加载小图片时的闪烁现象。
定位复杂：需要精确计算每个小图片的坐标和尺寸，尤其是当精灵图包含大量图片时，手动定位容易出错，需依赖工具辅助；
维护成本高：若需要新增、删除或修改某个小图片，通常需要重新制作整个精灵图，并调整所有相关 CSS 的坐标和尺寸（可通过自动化工具缓解此问题）；
不适合大图片：CSS 精灵仅适用于小图标、小图片，若将大图片（如 banner 图、产品图）合并，会导致精灵图体积过大，加载时间过长，反而影响性能；
响应式适配困难：精灵图的尺寸和坐标是固定的，在响应式布局中，若需要缩放图标，需额外处理（如使用 SVG 图标替代，或制作多套不同尺寸的精灵图）。
介绍
文档流是 CSS 布局的基础，理解其核心规则（元素分类、排列方式、margin 折叠、行高影响）是掌握 CSS 布局的关键。脱离文档流的方式（浮动、定位、display:none）会改变元素的布局行为，而现代布局（Flex/Grid）则是对文档流规则的扩展和优化，使布局更灵活、更易维护。在实际开发中，应优先使用 Flex/Grid 布局（现代浏览器支持良好），减少对浮动和绝对定位的依赖，以简化布局逻辑。
CSS 动画是网页动效的基础，** 过渡动画（Transition）** 适用于简单的状态切换，** 关键帧动画（Animation）** 适用于复杂的多阶段动画。实际开发中，应优先使用transform和opacity实现高性能动画，结合 JavaScript 处理复杂交互逻辑，同时兼顾兼容性和性能优化。随着 CSS Houdini（CSS API）的发展，CSS 动画的能力还将进一步扩展，为网页动效带来更多可能性。
媒体查询是响应式网页设计的核心技术，通过检测设备的特性（尤其是屏幕宽度）实现样式的条件化应用。实际开发中，推荐采用移动优先的断点设计原则，结合 Flexbox/Grid 布局和相对单位，构建简洁、高效的响应式页面。同时，需注意视口设置、媒体查询的顺序和性能优化，确保网页在不同设备上的兼容性和用户体验。
CSS 精灵是前端性能优化的经典技术，核心价值在于减少 HTTP 请求数，提升页面加载速度。在实际开发中，需结合项目特点合理使用：对于小图标、小位图，可采用 CSS 精灵；对于矢量图标，优先选择 SVG 或 Iconfont；对于大图片，应单独加载并优化。同时，借助自动化工具可大幅降低 CSS 精灵的制作和维护成本，使其在现代前端开发中仍能发挥作用。
less - 导入
- 作用：导入 less 公共样式文件
- 语法：导入:
@import "文件路径"; - 提示：如果是 less 文件可以省略后缀
- 代码示例：
@import './base.less'; @import './common';
less - 导出
- 写法：在 less 文件的第一行添加
// out: 存储URL（后有红色方框） - 提示：文件夹名称后面添加
/ - 代码示例：
// out: ./index.css // out: ./css/
