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

Question

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

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

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

没有它，它可以正常工作，:not但没有给我我想要的东西。

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

标签： javascriptcss-selectors

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" 没有;）或style="display:none;"（没有空格）的元素