::before和::after可剥离纯视觉装饰，避免无语义空标签；content必写（含content: ""），需设display及父元素position: relative；:is()和:where()合并选择器，前者影响优先级，后者恒为0。
用 ::before 和 ::after 替代空标签做装饰
很多页面为了加个分隔线、小图标或角标，硬塞一个 <span></span> 或 <div>，结果 DOM 里全是“没语义的占位符”。<code>::before 和 ::after 的核心价值就是把纯视觉层的东西从 HTML 剥离出去。
常见错误现象：content: "" 忘写，或者写了但没设 display（默认是 inline，不支持宽高），导致伪元素看不见；又或者给 position: absolute 的伪元素忘了加 position: relative 到父元素上。
-
content是必需属性，哪怕只写content: "" - 需要设置尺寸/定位时，记得给伪元素加
display: block或inline-block - 若用
absolute定位，确保父容器有position: relative - 避免在可访问性敏感区域（如按钮内）用伪元素承载关键信息——屏幕阅读器通常忽略它
示例：给标题加左侧竖线装饰，不用额外标签
h2 {
position: relative;
padding-left: 16px;
}
h2::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 16px;
background: #007bff;
}
用 :is() 和 :where() 合并重复选择器
为兼容老浏览器常写一堆前缀式选择器，比如 .btn-primary, .btn-secondary, .btn-danger，一改全改，还容易漏。现代 CSS 的 :is() 和 :where() 就是干这个的——减少冗余选择器，让 HTML 不用靠 class 堆砌来“适配样式”。
立即学习“前端免费学习笔记（深入）”；
使用场景：组件变体多、主题切换、表单状态组合（如 input:valid:focus + input:invalid:focus）。
-
:is()支持选择器列表，且以其中最高优先级的规则为准（会影响 specificity） -
:where()优先级恒为 0，更适合“安全合并”，比如重置某些通用状态 - 注意 Safari 旧版（:is() 支持不完整，
:where()更稳
示例：统一处理所有按钮的禁用态
:is(.btn-primary, .btn-outline, .btn-link):disabled {
opacity: 0.5;
cursor: not-allowed;
}
用 :has() 实现父元素状态响应（替代 JS 绑定）
以前想让父容器根据子元素状态变样式（比如表单里某个 input 有值了，整个 .form-group 加边框），只能靠 JS 监听 + 切 class。现在 :has() 让 CSS 自己“看”子元素，直接驱动样式，DOM 就不用反复加删 class。
容易踩的坑：:has() 不能出现在选择器开头（如 :has(> input) 合法，:has(input) .parent 不合法）；不支持在 @keyframes 或 transition 中使用；部分伪类（如 :focus-within）已有类似能力，但 :has() 更灵活。
- 必须配合另一个选择器使用，不能单独出现
- 性能敏感：避免深层嵌套或高频更新的子元素（如滚动容器里的大量 item）
- 目前 Chrome 105+ / Safari 15.4+ / Firefox 121+ 支持，Edge 同 Chrome
示例：当输入框获得焦点，外层 label 高亮
.form-group:has(input:focus) label {
color: #007bff;
font-weight: 600;
}
伪类控制交互反馈，避免 class 切换污染 HTML
像 :hover、:focus、:active、:checked 这些，本就是 CSS 天然的状态钩子。但很多人仍习惯用 JS 在元素上 toggle is-hovered 或 is-active 类，既多余又增加维护成本。
使用场景：按钮按压反馈、导航菜单展开收起（配合 details/summary）、表单校验提示显示隐藏。
-
:focus-visible比:focus更合理——只在键盘聚焦时触发，鼠标点击不干扰 -
:checked配合隐藏原生input[type="checkbox"]，用+ label或~控制自定义样式，完全不需要 JS - 移动端慎用
:hover——iOS Safari 默认不触发，除非用户点过一次
示例：纯 CSS 开关控件（无 JS，无额外 class）
input[type="checkbox"] {
display: none;
}
input[type="checkbox"] + label::before {
content: "◯";
}
input[type="checkbox"]:checked + label::before {
content: "◉";
}
真正难的是权衡：伪元素内容无法被选中、搜索、翻译；:has() 在复杂 DOM 下可能触发重排；而过度依赖 CSS 状态也可能让逻辑散落在样式表里，调试时比 JS 更难定位。该用 JS 的时候别硬扛，该留语义标签的地方也别为了“简洁”削足适履。
