这门课解决什么问题
很多前端开发者写样式时，仍停留在用类名堆叠和 !important 强行覆盖的阶段。一旦遇到复杂表单状态、模态框遮罩、跨组件文本高亮等场景，往往需要借助大量 JavaScript 脚本去操作 DOM。这门现代 CSS 体系课解决的核心痛点，就是帮你摆脱这种“重 JS 轻 CSS”的旧习惯。它系统梳理了近年来浏览器落地的新选择器、新颜色空间以及显式默认值控制。学完之后，原本需要写几十行业务脚本去判断的父子节点状态联动，现在只需几行原生 CSS 就能优雅实现，让页面结构更干净，渲染性能也更可控。
适合什么基础，建议先看哪几块
这份资料不适合完全零基础的人，它默认你已经熟练掌握常规的盒模型、定位布局和媒体查询。如果你平时写页面主要靠框架组件库、对原生层叠规则一知半解，直接看底层原理会有些吃力。作为编辑，我建议你先从选择器进阶部分入手，重点看 :has() 与 :focus-visible 相关的内容。:has() 是近年来最实用的父选择器，能直接解决“子元素状态改变时父元素响应”的痛点。看完这几块，再去啃颜色空间和默认值继承机制。颜色部分不要只当理论看，务必对照着改几个实际项目里的主题色，理解 OKLCH 等新格式在视觉一致性上的实际优势。
资料怎么配合练习与学完能做什么
这套资料本质是体系化的文本与代码片段，绝不是看完就能记住的科普读物。正确的用法是：每读完一个新特性，立刻打开手头的编辑器，找一个业务里的真实组件去改造。比如看到 :modal 和 ::backdrop 的章节，就去找项目里原来用第三方库写的弹窗，尝试用原生 CSS 替换掉冗余的 JS 显隐逻辑。学完这门课，你能独立完成复杂交互组件的纯样式实现，包括精准的全局焦点管理、无障碍访问的高亮提示，以及跨浏览器的色彩精准还原。更重要的是，面对现代浏览器的特性更新，你具备了直接查阅规范并落地的能力，而不是总在等社区出新的封装库。
跟着前手淘前端技术专家一起进阶 CSS
课程目录
* CSS 的父选择器：:has()
* CSS 选择器 :has() 能解决什么问题？
* CSS 选择器：:has() 与 :not() 的组合
* CSS 选择器：:where() vs. :is()
* CSS 焦点样式：:focus-visible 和 :focus-within
* 用于美化模态框的 :modal 和 ::backdrop
* CSS Custom Highlight API：Web 文本范围高亮的未来
* 画中画：CSS 的 :picture-in-picture 伪类
* CSS 显式默认值：inherit，initial，unset 和 revert
* 现代 CSS 中的颜色格式： RGB，HSL，HWB，LAB 和 LCH
* 新的 CSS 颜色空间：为 Web 设置高清颜色
* CSS 中的 OKLCH 和 OKLAB
* CSS 的混合颜色：color-mix()
* Web 控件 UI 颜色的定制：accent-color 和 color-scheme
* 颜色对比度：color-contrast()
* CSS 的比较函数： min()， max() 和 clamp()
* CSS 的三角函数
* F-mods：可用于 @font-face 的新特性
* CSS 的 text-box-trim 和 text-box-edge 给排版带来的变化
* Web 上的可变字体
* Web 上的彩色字体
* 首字母下沉： initial-letter
* 经典排版技术：使用 text-wrap: balance 实现文本平衡换行
* CSS 自定义属性你知道多少
* CSS 自定义属性可以用来做些什么
* 现代 CSS 中的相对单位
* CSS 逻辑属性和逻辑值
* CSS Grid 之瀑布流布局：masonry 和 masonry-auto-flow
* CSS 媒体查询新特性：@media
* CSS 判断：@supports
* CSS 分层：@layer
* CSS 容器查询之尺寸查询
* CSS 容器查询之样式查询和状态查询
* CSS 的嵌套和作用域：& 和 @scope
* CSS 计数器：@counter-style
* CSS 自定义属性: @property
* CSS 变换之单个变换
* CSS 宽高比：aspect-ratio
* CSS 的锥形渐变
* CSS 的 Clipping 和 Masking
* CSS 的 object-view-box
* CSS 图像处理与特效指南
* CSS 滚动驱动动效
* CSS 路径动画
* CSS 动画合成：animation-composition
* 解锁 CSS View Transitions API 的魔力
* CSS 锚点定位： 探索下一代 Web 布局
