如何选择具有相同类的所有元素而不选择具有上述类的其他元素加上第二个元素？答案

【问题标题】：How can I select all elements with the same class without selecting other elements with the aforementioned class plus a second one?如何选择具有相同类的所有元素而不选择具有上述类的其他元素加上第二个元素？
【发布时间】：2020-10-01 04:45:46
【问题描述】：

我想只选择具有特定第一类（价格）的跨度，而不选择也具有第二类（ishidden）的类似跨度。

<div class="classbla classble classbli">
  <div class="classblo">
    <span class="price  ishidden ">
    </span>
  </div>
</div>

我试过这个：

var z = document.querySelectorAll('.price');

还有这个：

var z = document.querySelectorAll('.price span:not(.price.ishidden)');

还有这个：

var z = document.querySelectorAll('.price', 'span:not(.ishidden)');

还有一些变体但没有成功：它总是选择所有以“价格”开头的元素，无论它们只有第一个类还是两个类。

另外，我正在一个不属于我的网站上尝试此操作，并使用导航器控制台。

【问题讨论】：

标签： javascript html selectors-api

【解决方案1】：

试试document.querySelectorAll('.price:not(.ishidden)')

根据https://developer.mozilla.org/

由于所有的 CSS 选择器字符串都是有效的，你也可以否定选择器：

var el = document.querySelector("div.user-panel:not(.main) input[name='login']");

这将选择一个输入，其父 div 具有用户面板类，但不是主类。

var elem = document.querySelectorAll('.price:not(.ishidden)');
console.log(elem[0])

<div class="classbla classble classbli">Test
  <div class="classblo">Test1
    <span class="price  ishidden">Test2
    </span>
    <span class="price">Test3
    </span>
  </div>
</div>

【讨论】：

【解决方案2】：

这对我来说很好。它选择所有具有类价格而不是隐藏的元素

document.querySelectorAll('.price:not(.ishidden)')

【讨论】：