CSS 排除级联类

Question

Web Mind Help！我有很多列表的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>

我要选择所有未翻译的内部文本

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

问题是如果类 TR 不在 LI 中，我无法过滤它

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

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

Answer 1

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

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>