如何从父元素中精准获取指定子元素？多重复class场景示例

一、CSS样式控制场景 #

如果是要给这个特定的hair元素设置样式，直接用父元素class限定后代元素的选择器即可：

• 基础写法：

  .3 .hair {
    /* 这里写你的样式规则，比如 color: red; */
  }
  

• 若遇到浏览器对数字开头class解析的兼容问题，改用属性选择器：

  [class="3"] .hair {
    /* 样式规则 */
  }
  

二、JavaScript DOM操作场景 #

如果需要在脚本中获取该元素进行交互等操作，推荐以下几种方法：

• 直接用querySelector精准匹配：

  // 获取目标元素
  const targetHair = document.querySelector('.3 .hair');
  // 兼容数字class的写法
  const targetHair = document.querySelector('[class="3"] .hair');
  

• 分步获取（先找父元素再找子元素，逻辑更清晰）：

  // 先拿到Object3的父容器
  const object3Container = document.querySelector('.3');
  // 再从父容器里找hair元素
  const targetHair = object3Container.querySelector('.hair');
  

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