查询选择器所有“显示：无；”的元素

Question

我有以下查询选择器，但它不起作用。为什么？

document.querySelectorAll('div:not[style*="display: none;"]')

我收到以下错误 is not a valid selector

没有，它可以正常工作，:not但是不能满足我的需求。

所以我想我没有:not正确使用

Answer 1

您忘记了()，这样使用:not([...])

let a = document.querySelectorAll('div:not([style*="display: none;"])')
console.log(a)

<div style="display: none;">a</div>
<div>a</div>
<div style="display: none;">a</div>
<div>a</div>
<div style="display: none;">a</div>

但是，我的建议是使用一个class隐藏该div，然后使用查询查找该类的方法...因为此选择器：[style*="display: none;]太脆弱，它不会获取具有以下元素的元素：例如：style="display: none" （without ;）或style="display:none;"（without）。