javascript - querySelectorAll，其中类不包含 'hide'

Question

document.querySelectorAll('.giftUpsell-offer-desc + a')

返回 3 个 a 元素:

[
<a href=​"https:​/​/​www.qa.example.com" class=​"button button--primary button--wide u-hide" someattribute="fish">​
                    Extend & Save
                  ​</a>​, <a href=​"www.qa.example.com" class=​"button button--primary button--wide u-hide" someattribute="cats">​
                    Extend & Save
                  ​</a>​, <a href=​"www.qa.example.com" class=​"button button--primary button--wide" someattribute="dogs">​
                    Extend & Save
                  ​</a>​
]

我需要找到元素当前可见的“someattribute”的值。我知道类属性不包含“hide”的元素就是我想要的元素。

我如何编辑上面的选择器以返回这个特定的 <a>元素？在此示例中是针对狗的。

Answer 1

使用 :not(<selector>) 伪类:

.giftUpsell-offer-desc + a:not(.u-hide)