时间戳

首页 > 解决方案 > CSS 排除级联类

javascript - CSS 排除级联类

问题描述

网络思维帮助！我有很多列表的 html 看起来像

<li>A.</li>
<li><a href="#">B.</a></li>
<li><a class=tr href="#">C.</a></li>
<li class=tr>D.</li>
<li class=notr>E.</li>

我想选择所有未翻译的 innerText

document.querySelectorAll("li:not(.notr):not(.tr)")

问题是如果 TR 类不在 LI 我不能过滤它

li:not(.notr):not(.tr)+li>a:not(.tr)- 返回空节点列表

这似乎是一个简单的问题，但我很困惑

标签： javascriptcsscascading

解决方案

就像我在评论中所说的那样，解决方案是首先获取这个集合，然后通过运行另一个过滤器来优化结果。

let rawresult = document.querySelectorAll("li:not(.notr):not(.tr)");

console.log('raw results:');
rawresult.forEach(el => console.log(el.innerText));

let refinedresult = [];
rawresult.forEach(function(el) {if (el.querySelector(".notr,.tr") == null) refinedresult.push(el);});

console.log('refined results:');
refinedresult.forEach(el => console.log(el.innerText));
<ul>
  <li>A.</li>
  <li><a href="#">B.</a></li>
  <li><a class=tr href="#">C.</a></li>
  <li class=tr>D.</li>
  <li class=notr>E.</li>
</ul>

推荐阅读