如何仅为包含子元素的class="parent"的<p>元素添加样式？

原代码问题分析 #

你当前的代码逻辑有误：document.querySelectorAll(".parent .child").length > 0是在整个页面范围内检查是否存在符合条件的元素，只要页面里有一个.parent包含.child，循环里的所有.parent元素都会被高亮，这显然不符合你要只高亮目标元素的需求。你需要逐个检查每个.parent元素内部是否包含.child子元素。

修正方案一：修改循环内的判断逻辑 #

直接针对每个.parent元素，检查其内部是否存在.child子元素：

window.onload = function() {
  var parents = document.getElementsByClassName('parent');

  for (let i = 0; i < parents.length; i++) {
    // 仅在当前.parent元素内部查找子元素
    if (parents[i].querySelector(".child")) {
      parents[i].style.backgroundColor = "yellow";
    }
  }
}

parents[i].querySelector(".child")会在当前遍历的.parent元素范围内查找子元素，找到则返回该元素（视为真值），否则返回null（视为假值），以此精准判断是否要高亮当前元素。

修正方案二：用:has()选择器直接定位目标元素 #

现代浏览器支持CSS的:has()选择器，可以直接匹配包含指定子元素的父元素，代码更简洁：

window.onload = function() {
  // 直接选中所有包含.child子元素的.parent元素
  document.querySelectorAll(".parent:has(.child)").forEach(el => {
    el.style.backgroundColor = "yellow";
  });
}

对应HTML代码 #

<p class="parent">
  Testing 1
</p>
<p class="parent">
  Testing 2
  <span class="child">
    test
  </span>
</p>
<p class="parent">
  Test 3
</p>
<p class="parent">
  Testing 4
</p>

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