[align=left]01 :is() —— 选择器合并神器，冗余直接砍半[/align][p=null, 0, left]把重复前缀一组合，代码瞬间清爽。[/p][code]/* 旧写法 */
header p, main p, footer p { line-height:1.6; }
/* 新写法 */
:is(header, main, footer) p { line-height:1.6; }[/code][p=null, 0, left]多层嵌套也能叠：[/p][code]:is(header, footer) a:is(:hover, :focus) { color:[color=#576b95 ][url=]#2563eb[/url]; }[/code]
[align=left]02 :where() —— 零权重福音，组件样式随便覆[/align][p=null, 0, left]功能和:is()一模一样，但特异性=0，写基础样式、组件默认样式神器。[/p][code]/* 权重高，难覆盖 */
article :is(h2,h3) { color:[color=#576b95 ][url=]#222[/url]; }
/* 权重0，轻松覆盖 */
article :where(h2,h3) { color:[color=#576B95 ][url=]#222[/url]; }[/code]适用场景：UI库、全局重置、基础排版。
[align=left]03 :has() —— 父选择器降临，干掉80%冗余JS[/align][p=null, 0, left]终于能根据子元素/兄弟关系选父级，逻辑直接写进CSS。[/p][code]/* 包含图片的卡片 */
.card:has(img) { padding-top:0; border-radius:12px 12px 0 0; }
/* 表单校验失败 */
.form-group:has(input:invalid) { border-color:[color=#576B95 ][url=]#ef4444[/url]; }
/* 有下拉菜单的导航项 */
nav li:has(ul) > a::after { content:"▼"; margin-left:6px; }[/code]真正的“CSS-if逻辑”，现代浏览器全支持。
[align=left]04 容器查询 —— 组件级响应式，告别视口绑架[/align][p=null, 0, left]比媒体查询强10倍：组件看容器宽度，不是看屏幕。[/p][code]/* 定义容器 */
.sidebar { container-type:inline-size; }
/* 容器够宽就变横版 */
@container (min-width:380px) {
.card { display:flex; gap:16px; }
}[/code]一套组件，适配侧边栏、弹窗、主内容区。
[align=left]05 @layer 层叠规则 —— 终结权重战争[/align][p=null, 0, left]用“层优先级”代替权重内卷，结构清晰到离谱。[/p][code]@layer reset, base, components, utilities;
@layer base {
body { line-height:1.5; }
}
@layer components {
.btn { padding:8px 16px; }
}[/code]层越靠后优先级越高，再也不用。
[align=left]06 :not() 多条件排除 —— 精准过滤，一行顶三行[/align][p=null, 0, left]新版支持多选择器并列，不用重复写:not()+:not()。[/p][code]/* 排除三类元素 */
div:not(.draft, .hidden, [data-loading="true"]) {
background:[color=#576B95 ][url=]#fff[/url];
}[/code]
[align=left]07 nth-child 高级公式 —— 批量排版不用加class[/align][p=null, 0, left]不用JS、不用循环，纯CSS控制间距、高亮。[/p][code]/* 第4个及以后 */
li:nth-child(n+4) { margin-top:12px; }
/* 前5个加粗 */
li:nth-child(-n+5) { font-weight:600; }
/* 奇偶行 */
tr:nth-child(even) { background:[color=#576B95 ][url=]#f9fafb[/url]; }[/code]
[align=left]08 属性选择器通配符 —— 自动识别链接/文件/状态[/align][p=null, 0, left]像正则一样匹配，自动给链接加图标、标状态。[/p][code]/* PDF链接 */
a[href$=".pdf"]::after { content:" 📄"; }
/* 外部链接 */
a[href^="http"]:not([href*="你的域名"])::after { content:" 🔗"; }
/* 数据状态 */
.card[data-status="error"] { border-color:[color=#576B95 ][url=]#ef4444[/url]; }[/code]
[align=left]09 :focus-visible —— 优雅焦点，不丑且可访问[/align][p=null, 0, left]只在键盘导航时显示轮廓，鼠标点击不干扰。[/p][code]button:focus-visible {
outline:2px solid [color=#576B95 ][url=]#2563eb[/url];
outline-offset:2px;
}[/code]
[align=left]10 :empty —— 空元素自动隐藏，布局不崩[/align][p=null, 0, left]没有文字、没有子元素，直接隐藏，不用JS判断。[/p][code]section:empty, div:empty { display:none; }[/code]
[align=left]11 相邻兄弟组合 —— 自动间距、排版逻辑[/align][p=null, 0, left]不用给每个元素加class，靠关系自动排版。[/p][code]/* 列表项之间自动间距 */
li + li { margin-top:8px; }
/* 标题后所有段落缩进 */
h2 ~ p { padding-left:1em; }[/code]
[align=left]12 color-mix() —— 原生混色，告别SASS变量[/align][p=null, 0, left]CSS自带颜色混合，主题色、渐变、透明度一键生成。[/p][code].btn {
background:color-mix(in srgb, #2563eb 80%, white 20%);
}[/code]
[align=left]13 accent-color —— 表单原生着色，一行统一风格[/align][p=null, 0, left]单选、复选、滑块一键换色，不用覆盖伪元素。[/p][code]input[type="checkbox"],
input[type="radio"] {
accent-color:[color=#576B95 ][url=]#2563eb[/url];
}[/code]
[align=left]14 subgrid —— 嵌套网格对齐，强迫症狂喜[/align][p=null, 0, left]子网格直接继承父网格轨道，卡片高度、标题完美对齐。[/p][code].container {
display:grid;
grid-template-columns:repeat(3,1fr);
}
.card {
display:grid;
grid-template-rows:subgrid;
grid-row:span 3;
}[/code]
[align=left]2026前端必背：4组黄金组合[/align][list=1]
[*]复杂选择器：:is() + :where() 精简代码
[*]关系判断：:has() 替代大量JS逻辑
[*]响应式：容器查询 + 媒体查询 双剑合璧
[*]工程化：@layer 管理优先级，告别权重地狱
[/list][align=left]最后[/align][p=null, 0, left]现代CSS早已不是“写样式”，而是用声明式逻辑控制UI。 这14个技巧，能让你：[/p][list]
[*]代码量减少60%–70%
[*]维护成本直线下降
[*]页面更流畅、扩展性更强
[/list][p=null, 0, left]建议立刻收藏，下次写CSS直接照着抄。[/p]