javascript - Element.matches 选择器限制

Question

我正在尝试使用 Element.matches使用复杂的选择器，但我收到错误:

Uncaught DOMException: Failed to execute 'matches' on 'Element': ':not(.myContainer *)' is not a valid selector.

var myMatchedElement = document.getElementById('iShould');
console.log(myMatchedElement.matches(':not(.myContainer *)'));

var myNotMatchedElement = document.getElementById('iShouldNot');
console.log(myNotMatchedElement.matches(':not(.myContainer *)'));

<div id="app">
  <div id="iShould">I should match the selector</div>
  <div class="myContainer">
    <span id="iShouldNot">I should not</span>
  </div>
</div>

这是选择器的简化版本，但基本上我需要“:not(.class childs)”并使用 Element.matches。

Answer 1

:not()仍然只接受simple selectors , .myContainer * 是 complex selector而不是一个简单的选择器。

即使 CSS 也不会接受你的规则。

:not(.myContainer *) {
  color: green;
}

<div id="app">
  <div id="iShould">I should match the selector</div>
  <div class="myContainer">
    <span id="iShouldNot">I should not</span>
  </div>
</div>

请注意Selectors 4现在扩展 not() 函数以接受复杂选择器列表，但只有 Safari 实现了它。