子选择器 > 是唯一能精确控制直接子元素的方式，用于仅匹配第一层子元素而非所有后代，IE7+ 支持，但结构不确定时易失效，媒体查询中需配合移动优先写法，复杂动态筛选需 JS 补位。
子选择器 > 是唯一能精确控制“直接子元素”的方式
想只让某个容器的**第一层子元素**响应样式变化，而不是所有嵌套后代，> 是必须项。比如 .container > .item 只匹配 <div class="container"><div class="item"></div></div>，不会命中 <div class="container"><section><div class="item"></div></section></div>。
常见错误是写成 .container .item（空格），结果深层嵌套的 .item 全被干掉，PC 端显示正常，移动端一缩放就漏控或误杀。
- IE7+ 全支持，现代项目可直接用，不用 polyfill
- 结构不确定时慎用：如果中间可能插入 wrapper 或 fragment，
>会直接失效，此时该换思路（比如靠[data-role]属性定位） - 别和
:nth-child()混用——后者数的是 DOM 位置，不是 class；.list > .active:nth-child(2)这种写法实际无效，因为:nth-child(2)不认 class
媒体查询里用 > 控制断点显隐，必须配合移动优先写法
移动端先写默认状态（比如隐藏图标文字组合里的文字），再用 @media (min-width: 768px) 恢复显示。关键点在于：所有断点规则都要基于同一套 DOM 结构，不能靠 JS 动态增删 class 来切换内容——否则 CSS 无法预测节点层级。
例如 PC 显示图标+文字、手机只显示图标，正确做法是：
立即学习“前端免费学习笔记（深入）”；
- HTML 里用两个平行子元素：
<div class="icon"></div><span class="label">设置</span> - 默认（小屏）：
.nav-item > .label { display: none; } - 大屏覆盖：
@media (min-width: 768px) { .nav-item > .label { display: inline; } } - 避免在媒体查询里写
!important——优先级靠选择器 specificity 解决，比如.nav > .item > .label比.label更强
display: none 在媒体查询中不生效？先查这三处
最常卡在优先级和层叠上，不是媒体查询写错了，而是别的规则把它压死了。
- 检查是否有更具体的选择器，比如
#header .nav-item .label比.nav-item > .label优先级高，直接覆盖媒体查询 - 确认没内联样式：
<span class="label" style="display: block">的优先级高于任何外部 CSS，包括媒体查询 - 留意父级是否用了
visibility: hidden或opacity: 0——display: none在这种情况下完全无效，因为元素仍被渲染、只是不可见
真正需要“运行时过滤”时，:scope + JS 才可靠
CSS 本身没有“根据当前上下文动态筛选子元素”的能力。比如一个卡片列表，每个卡片里有多个 .price，你想只让当前 hover 卡片里的 .price 变色——纯 CSS 做不到，:hover > .price 只能作用于直接子，且无法跨卡片隔离。
这时得用 JS：
-
cardElement.querySelector(':scope > .price')确保只取当前卡片的直接子 price - IE 不支持
:scope，旧项目得退化为cardElement.children遍历 +className.includes('price') - 别用
document.querySelectorAll('.card .price')——这又变成全局匹配，失去“当前卡片”上下文
断点切换和子元素过滤本质是两件事：前者靠媒体查询 + 精确选择器，后者靠 JS 补位。混在一起想“一套 CSS 解决所有”，容易在复杂交互里掉坑。
