React项目中body带hasModal类时如何选中并隐藏嵌套的.tool类div

错误写法原因 #

• body.hasModal > div.tool、.hasModal>.tool中使用的>是CSS直接子元素选择器，仅匹配父元素的第一层直接子节点。你的.tool属于body的多层嵌套后代元素，不是直接子元素，因此无法命中。
• .hasModal.tool的写法是匹配同时拥有hasModal和tool两个类名的同一个元素，你的hasModal类在body标签上，tool类在div上，不符合匹配规则，因此不生效。

正确实现代码 #

使用后代选择器即可，空格会匹配父元素下所有层级的对应后代元素，不受嵌套层数限制：

body.hasModal .tool {
  display: none;
}

特殊情况处理 #

如果添加上述代码后仍不生效，一般是选择器优先级冲突导致的：

• 检查原有代码是否有更具体的选择器（比如.container .content .tool）为.tool设置了display属性，你可以把选择器写得和原有规则一样具体，比如body.hasModal .container .content .tool { display: none; }
• 如果.tool的display属性是通过行内样式设置的，可以加!important覆盖：body.hasModal .tool { display: none !important; }

内容的提问来源于stack exchange，提问作者TinaSky