现代CSS 14个实战技巧：父选择器、容器查询、零权重全都有
新一代CSS已经彻底进化。父选择器、零权重、容器响应、样式逻辑、原生条件判断，现在已经全部原生支持。今天这14个实战技巧，全是大厂真实项目在用的，复制粘贴就能用，能让你的样式表更短、更快、更好维护。
01 :is() —— 合并选择器，代码量砍半
把重复的前缀组合在一起，代码一下就清爽了。
/* 旧写法 */
header p, main p, footer p { line-height: 1.6; }
/* 新写法 */
:is(header, main, footer) p { line-height: 1.6; }多层嵌套也能叠在一起写：
:is(header, footer) a:is(:hover, :focus) { color: #2563eb; }02 :where() —— 零权重，组件样式随便覆盖
功能和:is()一模一样，但它的特异性是0。写基础样式和组件默认样式非常好用。
/* 权重高，难覆盖 */
article :is(h2, h3) { color: #222; }
/* 权重0，轻松就能覆盖 */
article :where(h2, h3) { color: #222; }适合用在UI库、全局重置、基础排版这些场景。
03 :has() —— 父选择器来了，干掉80%的冗余JS
终于能根据子元素或兄弟元素来找父级了，逻辑直接写进CSS里。
/* 包含图片的卡片 */
.card:has(img) { padding-top: 0; border-radius: 12px 12px 0 0; }
/* 表单校验失败时 */
.form-group:has(input:invalid) { border-color: #ef4444; }
/* 有下拉菜单的导航项 */
nav li:has(ul) > a::after { content: "▼"; margin-left: 6px; }这就是真正的“CSS-if逻辑”，现代浏览器都已经支持了。
04 容器查询 —— 组件级响应式，不再依赖视口
比媒体查询强很多。组件看的是它自己容器的宽度，不是屏幕宽度。
/* 定义容器 */
.sidebar { container-type: inline-size; }
/* 容器够宽就变成横版布局 */
@container (min-width: 380px) {
.card { display: flex; gap: 16px; }
}一套组件，能同时适配侧边栏、弹窗、主内容区。
05 @layer 层叠规则 —— 终结权重战争
用“层优先级”来代替权重内卷，结构非常清晰。
@layer reset, base, components, utilities;
@layer base {
body { line-height: 1.5; }
}
@layer components {
.btn { padding: 8px 16px; }
}层越靠后优先级越高，再也不用写!important了。
06 :not() 多条件排除 —— 精准过滤，一行顶三行
新版支持多个选择器并列，不用重复写多个:not()。
/* 排除三类元素 */
div:not(.draft, .hidden, []) {
background: #fff;
}07 nth-child 高级公式 —— 批量排版不用加class
不用JS，不用循环，纯CSS就能控制间距和高亮。
/* 第4个及以后的元素 */
li:nth-child(n+4) { margin-top: 12px; }
/* 前5个加粗 */
li:nth-child(-n+5) { font-weight: 600; }
/* 奇偶行不同颜色 */
tr:nth-child(even) { background: #f9fafb; }08 属性选择器通配符 —— 自动识别链接、文件、状态
像正则表达式一样匹配，自动给链接加图标、标状态。
/* PDF链接 */
a[href$=".pdf"]::after { content: " 📄"; }
/* 外部链接 */
a[href^="http"]:not([href*="你的域名"])::after { content: " 🔗"; }
/* 数据状态 */
.card[] { border-color: #ef4444; }09 :focus-visible —— 优雅焦点，既好看又支持无障碍
只在键盘导航时显示轮廓，鼠标点击时不会干扰视觉。
button:focus-visible {
outline: 2px solid #2563eb;
outline-offset: 2px;
}10 :empty —— 空元素自动隐藏，布局不乱
没有文字、没有子元素的盒子，直接隐藏，不用JS判断。
section:empty, div:empty { display: none; }11 相邻兄弟组合 —— 自动加间距、排版逻辑
不用给每个元素加class，通过元素之间的关系自动排版。
/* 列表项之间自动加间距 */
li + li { margin-top: 8px; }
/* 标题后面的所有段落缩进 */
h2 ~ p { padding-left: 1em; }12 color-mix() —— 原生混色，不用再靠SASS
CSS自己就能混合颜色，做主题色、渐变、调整透明度都很方便。
.btn {
background: color-mix(in srgb, #2563eb 80%, white 20%);
}13 accent-color —— 表单原生着色，一行代码统一风格
单选框、复选框、滑动条，一行代码就能换颜色，不用再覆盖伪元素。
input[type="checkbox"],
input[type="radio"] {
accent-color: #2563eb;
}14 subgrid —— 嵌套网格对齐，强迫症福音
子网格直接继承父网格的轨道，卡片高度、标题都能完美对齐。
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.card {
display: grid;
grid-template-rows: subgrid;
grid-row: span 3;
}2026年前端必背：4组黄金组合
复杂选择器：:is() + :where()，精简代码
关系判断：:has()，替代大量JS逻辑
响应式：容器查询 + 媒体查询，双剑合璧
工程化：@layer 管理优先级，告别权重地狱
最后
现代CSS早已经不是“写样式”了，而是用声明式的逻辑来控制UI。这14个技巧能帮你：
代码量减少60%到70%
维护成本直线下降
页面更流畅，扩展性更强
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
