必须用组合选择器显式定义父子关系和状态，如 .card .content { display: none; } 和 .card.active .content { display: block; }，空格表示后代关系，顺序不可颠倒，避免误用直接子选择器、错误类名顺序或依赖 opacity 隐藏。
不能靠“父元素有类名”就自动让子元素隐藏或显示，必须用组合选择器显式写出父子关系和目标状态。
父类名 + 子元素选择器必须写全路径
比如想让 .card.active 下的 .content 显示，而其他情况隐藏，得这样写：
.card .content { display: none; }
.card.active .content { display: block; }
关键点：
-
.card.active .content中的空格表示后代关系，.card.active是前提，.content是目标 - 别写成
.card.active > .content（除非你确定是直接子元素），否则可能漏匹配 - 顺序不能颠倒：
.content.card.active是错的——这要求单个元素同时拥有三个类 - 如果子元素是
<button></button>且要控制它在:disabled时的样式，就得写.form--compact button:disabled，不是.form--compact:disabled button
用 :hover 或 :focus 时更要小心嵌套逻辑
常见错误是把“父有类名时子 hover 才生效”写成 .card:hover .title，这实际是“card 被 hover 时 title 变样式”。真正要的是：
立即学习“前端免费学习笔记（深入）”；
.card.active .title:hover { color: blue; }
注意：
-
.card.active .title:hover表示：父同时有.card和.active，且用户正 hover.title - Sass/Less 里
&:hover指的是当前选择器自身，不是子元素。所以.btn { &:hover { } }编译为.btn:hover，不是.btn .child:hover - 移动端慎用
:hover，很多设备不触发，建议配合focus或 JS 切换类
父类名影响子元素 visibility / display 时，优先用 class 控制
靠父类名切换子元素显隐，本质是 CSS 类的条件渲染。但要注意：
-
display: none会彻底移除元素流，visibility: hidden保留占位——选哪个取决于布局是否要塌陷 - 别依赖父元素的
opacity: 0来“隐藏”子元素，子元素可能仍可交互（焦点、点击） - 如果子元素本身有内联
style="display: block"，它会覆盖外部 CSS，除非加!important（不推荐）或改用 JS 移除该 style - Flex 容器中，
display: none的子元素不会参与排列；但visibility: hidden仍占 flex item 位置
最易被忽略的是：父类名变化本身不会触发重排，但组合选择器的匹配结果会实时响应。只要父元素 class 列表更新（比如 JS 改 el.classList.add("active")），浏览器就会重新计算所有匹配该选择器的子元素样式——这个过程是自动的，但前提是选择器写对了。
