CSS 选择器主要分这几类：基础选择器，比如标签选择器div、类选择器.box、ID 选择器#header、通配符*；关系选择器，像子代div>p、后代div p、相邻兄弟div+p；属性选择器，比如[type="text"]；结构伪类，如nth-child(2)；还有伪类、伪元素选择器。举几个常用例子：类选择器.item{color:red}、子代选择器ul>li{margin:0}、属性选择器[href]{text-decoration:none}，这些选择器能精准选中元素，满足不同场景的样式控制需求，日常写样式基本靠它们组合使用。
CSS 预处理器就是给 CSS 加扩展功能的工具，常见的有 Sass、Less、Stylus，它不能被浏览器直接识别，要编译成原生 CSS。优点特别多：支持嵌套写法，代码层级清晰不用重复写选择器；能定义变量、混合宏，方便复用样式；还有逻辑判断、循环函数，复杂样式更好维护。但也有局限：必须配置编译环境，多了一步操作；有一定学习成本，新手要额外学语法；编译出错会导致样式失效；现在原生 CSS 也支持变量、嵌套了，部分预处理器功能被替代，小项目用反而有点冗余。
CSS 原生变量叫自定义属性，写法是--变量名:值，调用用var(变量名)，一般定义在:root里全局用。比如:root{--main-color:#2385bb;--gap:16px;}，然后.box{color:var(--main-color);padding:var(--gap);}。好处很明显：统一管理样式，改主题只换变量值，不用到处搜改代码；复用性强，相同尺寸、颜色只写一次；还能配合 JS 动态修改，实现换肤、响应式调整，比写死数值灵活太多，大幅减少重复代码，维护效率超高。
这四个是 CSS 属性值关键字：inherit表示强制继承父元素的样式，比如子元素color:inherit就用父级文字颜色；initial是把属性恢复到浏览器定义的初始默认值，不管继承和之前样式；unset是个“智能值”，属性能继承就等同于inherit，不能继承就等同于initial；revert是回滚到浏览器用户代理样式，比如按钮all:revert会恢复成浏览器默认按钮样式，跳过自己写的样式，四个关键字主要用来快速重置、继承样式，简化代码。
all是 CSS 里的批量重置属性，能一次性重置元素除了 direction 和 unicode-bidi以外的所有 CSS 属性，值只能用inherit、initial、unset、revert。用法很简单，直接给元素加all:关键字，比如.reset{all:unset;}，就能一键清空该元素所有自带样式和自定义样式。特别适合重置按钮、输入框、自定义组件，不用逐个写border:none、background:none等，一行代码搞定样式重置，省时又不容易漏写属性，日常做组件重置特别好用。
calc()是 CSS 的计算函数，用来动态计算尺寸值，支持加减乘除，写法是calc(表达式)，注意运算符两边要加空格。比如宽度width:calc(100% - 60px)、高度height:calc(50vh + 20px)，还能混合不同单位计算。它最大优点是灵活：能结合百分比、vh、px、rem 等单位算值，不用手动算死数值；适配不同屏幕尺寸，响应式布局更方便；不用借助 JS 就能实现动态尺寸，简化布局逻辑，比如侧边栏固定宽度，主内容自适应就靠它，精准又省事。
CSS 用自定义字体分三步：第一步准备字体文件，比如 ttf、woff、woff2 格式，优先选 woff2 兼容性好体积小；第二步用@font-face定义字体，设置字体名和字体路径，比如@font-face{font-family:myFont;src:url("./font.woff2") format("woff2");}；第三步直接在样式里调用字体名，.title{font-family:myFont,sans-serif;}。要注意字体文件路径别错，跨域字体要配置服务器允许跨域，同时备上系统字体做降级，避免字体加载失败影响显示。
伪类和伪元素核心区别：伪类是选中元素的状态或位置，操作的是现有元素，用单冒号:，比如:hover鼠标悬浮、:active点击、:first-child第一个子元素。伪元素是创建不存在的虚拟元素，相当于加了个不在 HTML 里的节点，标准用双冒号::，比如::before、::after。简单记：伪类管“状态”，伪元素管“造元素”；伪类不新增节点，伪元素会生成虚拟节点，用途和写法完全不一样，别混用。
content属性只能配合伪元素::before和::after使用，普通元素用不了，作用是给伪元素填充内容。可以填文本content:"提示"、图标content:"\e600"、空内容content:""，还能调用属性值content:attr(data-text)。主要用途：给元素加装饰文字、小图标，不污染 HTML 结构；做清除浮动，.clear::after{content:"";display:block;clear:both;}；插入动态属性内容，美化页面细节，不用在 HTML 里加多余标签，让结构更干净。
