javascript - 如何使用 CSS 或 JS 定位类的父类

Question

即:我想定位 <div> a1 类的元素，但不是 a2、a3 的元素。下一个 a2 相同，但不是 a1、a3。

我正在尝试构建一个过滤工具。但棘手的部分是我不能在 <div> 上使用类元素，因为其他没有 HTML 背景的人需要在 CMS 平台上编辑它们，而我无法向此类添加类 <div>元素。

<div>
 <h1>Name</h1>
 <ul>
   <li class="a1">Test</li>
   <li class="a2">Test</li>
   <li class="a3">Test</li>
 </ul>
 <p>Some text</p>
</div>

<div>
 <h1>Name</h1>
 <ul>
   <li class="a1">Test</li>
   <li class="a2">Test</li>
   <li class="a3">Test</li>
 </ul>
 <p>Some text</p>
</div>

<div>
 <h1>Name</h1>
 <ul>
   <li class="a1">Test</li>
   <li class="a2">Test</li>
   <li class="a3">Test</li>
 </ul>
 <p>Some text</p>
</div>

<div>
 <h1>Name</h1>
 <ul>
   <li class="a1">Test</li>
   <li class="a2">Test</li>
   <li class="a3">Test</li>
 </ul>
 <p>Some text</p>
</div>

预先感谢您让我挑选您的大脑

Answer 1

有一个你可以使用的伪类选择器 :has但是，还没有浏览器实现它。实际上，它根本不打算在样式表中使用，因此您唯一的选择就是 JavaScript。

[...document.querySelectorAll('li.a1')].map(x => x.closest('div').classList.add('X'))

.X {
  border:1px solid red;
} 

<div>
 <h1>Name</h1>
 <ul>
   <li class="a1">Test</li>
   <li class="a2">Test</li>
   <li class="a3">Test</li>
 </ul>
 <p>Some text</p>
</div>

<div>
 <h1>Name</h1>
 <ul>
   <li class="a1">Test</li>
   <li class="a2">Test</li>
   <li class="a3">Test</li>
 </ul>
 <p>Some text</p>
</div>

<div>
 <h1>Name</h1>
 <ul>
   <li class="a1">Test</li>
   <li class="a2">Test</li>
   <li class="a3">Test</li>
 </ul>
 <p>Some text</p>
</div>

<div>
 <h1>Name</h1>
 <ul>
   <li class="a1">Test</li>
   <li class="a2">Test</li>
   <li class="a3">Test</li>
 </ul>
 <p>Some text</p>
</div>