React中CSS选择器使用问题：类后代选择器失效如何解决？

常见原因 #

最可能的问题是CSS模块化导致的类名哈希化。比如用Create React App搭建的项目，默认会对.module.css后缀的样式文件启用模块化，此时你写的.abc、.xyz会被编译成类似.abc_abc123这种带哈希的类名，而你在组件里给<ul>设置的className还是"abc"，自然匹配不上原选择器。

另外也可能是组件结构问题：如果你的<li>不是<ul>的直接子元素（比如中间嵌套了其他自定义组件），那>直接子选择器也会失效，但这种情况相对少见，优先排查模块化问题。

最简单的解决方法 #

方法1：关闭CSS模块化 #

如果不需要样式模块化，直接把样式文件的后缀从.module.css改成.css，这样类名不会被哈希处理，你原本写的.abc > li、.xyz > li就能正常生效。

方法2：保留模块化，用:global()包裹全局类名 #

要是想继续使用CSS Modules，就在样式里把全局类名用:global()包裹，这样该类名不会被添加哈希后缀：

:global(.abc) > li {
  color: #ff4444;
  padding: 8px 12px;
}

:global(.xyz) > li {
  color: #33b5e5;
  padding: 8px 12px;
  border-left: 3px solid currentColor;
}

方法3：用CSS-in-JS直接绑定样式 #

如果项目允许，使用styled-components这类CSS-in-JS工具会更直观，直接在组件中根据className设置子元素样式：

import styled from 'styled-components';

const CustomUl = styled.ul`
  &.abc > li {
    background-color: #f5f5f5;
    border-radius: 4px;
  }
  &.xyz > li {
    background-color: #e8f4f8;
    border-radius: 4px;
  }
`;

// 组件中使用示例
<CustomUl className="abc">
  <li>列表项1</li>
  <li>列表项2</li>
</CustomUl>

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