React项目中如何选中id为root的div？

可能的原因及修复方案 #

• 选择器使用错误
  你写的body:first-child是选中作为父元素第一个子元素的body，而非body的第一个子元素。要选中body下的#root，直接用#root即可，或者更明确的body > #root；如果要选中body的第一个子元素，应该用body > :first-child。

• 样式优先级被覆盖
  检查是否有其他样式文件里的#root样式优先级更高：

  • 比如其他选择器更具体（div#root比#root优先级高）
  • 其他样式加了!important强制覆盖
    可以临时给你的样式加!important测试（不推荐长期使用），验证是否被覆盖：

  #root {
    width: 100% !important;
    height: 100% !important;
  }
  

  如果生效，就去排查覆盖它的样式来源，调整选择器特异性来解决优先级冲突。

• CSS作用域/模块化问题
  如果项目用了CSS Modules，虽然id选择器通常不会被哈希处理，但可以检查编译后的CSS输出，确认#root选择器是否被修改。若出现该问题，要么改用全局样式（比如文件名改为xxx.global.scss），要么在选择器前加:global()声明全局作用域：

  :global(#root) {
    width: 100%;
    height: 100%;
  }
  

• DOM结构验证
  打开浏览器开发者工具（F12），在Elements面板确认：

  • #root确实是body的直接子元素，没有被其他嵌套元素包裹
  • 查看#root的Styles面板，确认你的样式是否被划掉（被覆盖的标志），并定位覆盖样式的来源

测试代码示例 #

先尝试最直接的全局选择器，排除作用域问题：

body {
  /* 确认SCSS生效的测试样式 */
  background-color: #f0f0f0;
}

#root {
  width: 100%;
  height: 100%;
  background-color: blue; /* 用明显颜色快速验证是否生效 */
}

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