最实在的无障碍用途是直接响应ARIA属性或原生表单状态变化：[aria-hidden="true"]应设visibility: hidden + pointer-events: none；button:disabled需统一opacity: 0.5 + cursor: not-allowed且对比度≥4.5:1。
用 [aria-hidden] 和 [disabled] 控制可访问性状态样式
属性选择器最实在的无障碍用途，是直接响应 ARIA 属性或原生表单状态变化，避免依赖 JS 操作 class。比如 [aria-hidden="true"] 元素不该被聚焦或读屏，你可以立刻隐藏它、移除动画、禁用 pointer-events：
-
[aria-hidden="true"]应配合visibility: hidden+pointer-events: none，不能只用display: none（否则会破坏语义流） -
button[disabled]要覆盖默认浏览器灰化效果，统一设置opacity: 0.5+cursor: not-allowed，并确保颜色对比度仍 ≥ 4.5:1 - 避免写
[aria-hidden]（不带值），因为部分旧浏览器会匹配aria-hidden="false"，必须写全[aria-hidden="true"]
响应式断点中用 [data-breakpoint] 替代媒体查询硬编码
当需要在不同视口下启用/禁用某组无障碍行为（如小屏下折叠导航后自动展开子菜单），硬写 @media (max-width: 767px) 容易和 JS 状态脱节。更可控的做法是让 JS 设置一个 data 属性，CSS 用属性选择器响应：
- JS 在 resize 后设置
document.documentElement.setAttribute('data-breakpoint', 'mobile') - CSS 写
nav[data-breakpoint="mobile"] .submenu { max-height: 0; overflow: hidden; }，再用 transition 做收起动画 - 好处是：断点逻辑集中管理，无障碍焦点管理（如
tabindex切换）可与该属性联动，不用重复判断window.innerWidth - 注意：
data-属性名要语义清晰，别用data-mobile这类布尔型命名，它无法表达“tablet”“desktop”等中间态
[type="search"] 和 [role="search"] 的样式隔离与语义强化
搜索框是无障碍高频交互点，但默认样式千差万别。用属性选择器能精准锁定，并叠加语义增强：
-
input[type="search"]必须重置appearance: none，否则 Safari 会加圆角+清空按钮，影响一致性 -
form[role="search"]应强制display: flex+gap: 0.5rem，确保 label、input、submit 在窄屏下仍保持可点击区域 ≥ 44×44px - 别漏掉
input[type="search"]:focus-visible，这是键盘用户焦点可见性的关键钩子；仅用:focus会干扰鼠标用户的视觉反馈 - 如果用了
aria-label而没写 visible label，记得加input[aria-label]:not([aria-labelledby])规则，给它补个 screen-reader-only 的占位提示
伪类组合 :focus-within + 属性选择器修复键盘导航断裂
响应式菜单常在小屏下折叠为 hamburger，展开后若子项无明确 focus 区域，键盘用户按 Tab 就会跳过整个菜单。用 :focus-within 配合属性选择器能守住焦点链：
-
.nav-menu[aria-expanded="true"]:focus-within可触发背景高亮或边框强调，让用户感知当前操作域 - 搭配
.nav-menu[aria-expanded="true"] > ul:focus-within li a，确保子链接获得足够焦点指示（比如加outline-offset: 2px） - 注意：IE 不支持
:focus-within，若需兼容，得 fallback 到 JS 监听focusin并添加临时 class - 别把
[aria-expanded]和[hidden]混用——前者是 ARIA 状态，后者是 HTML 布尔属性，CSS 里[hidden]会直接匹配所有含 hidden 属性的元素，包括未初始化的
实际项目中最容易被忽略的是：属性选择器的特指度（Specificity）比类选择器高一级，button[disabled] 会盖过 .btn-primary 的颜色设置。调试时如果样式不生效，先查 computed styles 里哪条规则被 override，而不是急着加 !important。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
