媒体查询中class选择器不会失效，但受优先级、作用域及解析环境影响；需注意specificity竞争、css-in-js/shadow dom支持限制、避免冗余class命名，伪类与属性选择器可嵌套使用但有兼容性差异，container queries不改变class写法但依赖容器配置。
媒体查询里写 class 选择器会失效吗？
不会失效，但容易被忽略优先级和作用域问题。媒体查询只是条件包装器，里面写的 .btn、#header 或 [data-active] 都照常解析，但它的样式规则只在匹配断点时才生效。关键在于：它不改变选择器本身的能力，只控制“是否启用”。
- 媒体查询内外的同名选择器会按 CSS 层叠规则竞争，后定义的、更具体的选择器胜出
- 不要指望
@media (max-width: 768px) 里的 .card 能覆盖外部未加媒体查询的 .card:hover，除非 specificity 相同且顺序靠后
- 如果用 CSS-in-JS 或 Shadow DOM，媒体查询需写在支持范围内（比如
styled-components 的 css 函数里可以，但 Web Component 的 :host 外套媒体查询可能无效）
class 名要不要随断点改？比如 .menu-mobile 和 .menu-desktop
没必要，也违背响应式初衷。用同一组 class 名 + 媒体查询控制行为，才是可维护的正路。硬拆成两套 class 容易导致 HTML 膨胀、JS 切换逻辑变重、语义割裂。
- 改 class 名 = 把响应逻辑从 CSS 推到 JS，增加运行时开销和出错点
- 比如用
document.body.classList.toggle('mobile-view') 控制类名，再写两套 CSS，不如直接用 @media (max-width: 480px) 管理所有移动样式
- 真有差异极大的结构（比如侧边栏变底部导航），优先考虑
display: none / block 切换，或用 container queries（如果环境支持）
伪类和属性选择器在媒体查询里能嵌套使用吗？
能，但要注意浏览器兼容性与解析时机。像 :hover、:focus-within、[data-collapsed="true"] 这些，在媒体查询内部完全可用，它们的触发逻辑不受断点影响。
-
@media (prefers-reduced-motion: reduce) 里写 .fade-in { animation: none; } 是标准用法
- 但
@media (hover: hover) 里写 a:hover { color: red; } 在部分安卓 WebView 里可能不触发，因为“hover 能力”判断不准确
- Safari 15.4+ 才完整支持
@media (update: slow) 配合 :active，旧版会直接忽略整条规则
用 container queries 替代 media queries 后，class 选择器写法要变吗？
不用变，但得确认容器已设 contain: layout style 或使用 container-type。class 选择器本身没变化，变的是作用范围——它现在相对容器尺寸，而非视口。
- 写
@container (min-width: 300px) 时，里面的 .item 只对这个容器内的元素生效，不影响页面其他同名 class
- 如果容器没声明
container-name，又用了命名容器查询（@container sidebar (min-width: 200px)），规则会被跳过，连警告都没有
- 目前 Chrome 105+、Firefox 110+、Safari 16.4+ 支持，但 SSR 渲染时容器尺寸不可知，服务端不会应用这些规则
@media (max-width: 768px) 里的 .card 能覆盖外部未加媒体查询的 .card:hover，除非 specificity 相同且顺序靠后 styled-components 的 css 函数里可以，但 Web Component 的 :host 外套媒体查询可能无效）- 改 class 名 = 把响应逻辑从 CSS 推到 JS，增加运行时开销和出错点
- 比如用
document.body.classList.toggle('mobile-view')控制类名，再写两套 CSS，不如直接用@media (max-width: 480px)管理所有移动样式 - 真有差异极大的结构（比如侧边栏变底部导航），优先考虑
display: none / block切换，或用container queries（如果环境支持）
伪类和属性选择器在媒体查询里能嵌套使用吗？
能，但要注意浏览器兼容性与解析时机。像 :hover、:focus-within、[data-collapsed="true"] 这些，在媒体查询内部完全可用，它们的触发逻辑不受断点影响。
-
@media (prefers-reduced-motion: reduce) 里写 .fade-in { animation: none; } 是标准用法
- 但
@media (hover: hover) 里写 a:hover { color: red; } 在部分安卓 WebView 里可能不触发，因为“hover 能力”判断不准确
- Safari 15.4+ 才完整支持
@media (update: slow) 配合 :active，旧版会直接忽略整条规则
用 container queries 替代 media queries 后，class 选择器写法要变吗？
不用变，但得确认容器已设 contain: layout style 或使用 container-type。class 选择器本身没变化，变的是作用范围——它现在相对容器尺寸，而非视口。
- 写
@container (min-width: 300px) 时，里面的 .item 只对这个容器内的元素生效，不影响页面其他同名 class
- 如果容器没声明
container-name，又用了命名容器查询（@container sidebar (min-width: 200px)），规则会被跳过，连警告都没有
- 目前 Chrome 105+、Firefox 110+、Safari 16.4+ 支持，但 SSR 渲染时容器尺寸不可知，服务端不会应用这些规则
@media (prefers-reduced-motion: reduce) 里写 .fade-in { animation: none; } 是标准用法 @media (hover: hover) 里写 a:hover { color: red; } 在部分安卓 WebView 里可能不触发，因为“hover 能力”判断不准确 @media (update: slow) 配合 :active，旧版会直接忽略整条规则 contain: layout style 或使用 container-type。class 选择器本身没变化，变的是作用范围——它现在相对容器尺寸，而非视口。
- 写
@container (min-width: 300px)时，里面的.item只对这个容器内的元素生效，不影响页面其他同名 class - 如果容器没声明
container-name，又用了命名容器查询（@container sidebar (min-width: 200px)），规则会被跳过，连警告都没有 - 目前 Chrome 105+、Firefox 110+、Safari 16.4+ 支持，但 SSR 渲染时容器尺寸不可知，服务端不会应用这些规则
实际项目里最常漏掉的，是媒体查询中对 rem、vh 单位的依赖——它们仍基于根元素或视口计算，不会因为容器变小就自动缩放。这点和 container queries 的行为本质不同，混用时尤其容易出视觉偏差。
