CSS3 核心样式与选择器进阶

一、CSS3 概述

CSS3是层叠样式表的最新版本，采用模块化设计，新增选择器、圆角、阴影、渐变、过渡、动画等特性，实现了纯CSS实现复杂视觉效果，大幅减少JS代码量，提升页面渲染流畅度。

二、常用高级选择器

高效精准选中元素，简化CSS代码层级，提升样式复用性：

• 后代选择器（空格）：匹配所有后代元素，例：.box p

• 子代选择器（>）：仅匹配直接子元素，不包含孙子层级

• 相邻兄弟选择器（+）：匹配当前元素紧邻的下一个兄弟元素

• 通用兄弟选择器（~）：匹配当前元素之后所有同级兄弟元素

• 属性选择器：[class*="box"] 匹配class包含box的所有元素

• 伪类选择器：:hover（悬浮）、:active（点击）、:nth-child()（奇偶/指定序号元素）

• 伪元素选择器：::before、::after（创建虚拟元素，常用于图标、装饰线）

三、视觉样式核心特性

• 圆角 border-radius：支持单角设置、圆形（50%）、椭圆效果，替代传统图片圆角

• 阴影效果：box-shadow（盒子阴影）、text-shadow（文字阴影），支持模糊、偏移、内外阴影

• 渐变背景：linear-gradient（线性渐变）、radial-gradient（径向渐变），可实现多色过渡

• 透明度：opacity（整体透明，影响子元素）、rgba（仅背景/颜色透明，不影响子元素）

四、过渡与动画基础

• transition 过渡：实现属性平滑变化，支持时长、延迟、过渡曲线，用于hover交互效果

• animation 动画：配合@keyframes 关键帧，实现复杂、循环动画，无需JS即可完成轮播、弹跳等效果

五、开发技巧

1. 伪元素必须设置content属性，否则无法显示；

2. 过渡动画尽量作用于transform、opacity属性，不会触发页面重排，性能更高；

3. 统一浏览器前缀，兼容低版本浏览器（-webkit-、-moz-）。