带有单个“:not()”的多个连接属性选择器与 JavaScript 中带有多个“:not()”的多个单独属性选择器

Question

我有 2

<input>

s 并尝试通过将 2 个连接的属性选择器设置为 1

<input>

和 2 个单独的属性选择器分别使用

querySelectorAll()

来选择

:not()

s，如下所示： :not()

然后，2 个带有 1 

<input type="text" name="first-name" id="fn" value="John">
<input type="text" name="last-name" id="ln" value="Smith">

<script>
                          // 2 joined attribute selectors to 1 ":not()"
document.querySelectorAll('input:not([name="first-name"][id="ln"])');

                          // 2 separate attribute selectors to 2 `:not()`s
document.querySelectorAll('input:not([name="first-name"]):not([id="ln"])');
</script>

的连接属性选择器选择

John 的 

:not()

 和 

Smith 的 <input>

 和 2 个带有 2 

<input>s 的独立属性选择器选择

nothing

，如下所示： :not()

那么，2 个带有 1 

                          // 2 joined attribute selectors to 1 ":not()"
document.querySelectorAll('input:not([name="first-name"][id="ln"])');
// John's <input> and Smith's <input>

                          // 2 separate attribute selectors to 2 `:not()`s
document.querySelectorAll('input:not([name="first-name"]):not([id="ln"])');
// Nothing

的连接属性选择器和 2 个带有 2

:not()

s 的独立属性选择器有什么区别？

Answer 1

:not()

选择两个输入元素，因为页面上没有元素同时将 name 属性设置为“名字”

和

id 属性设置为“ln”。因此，它们都匹配。 （input:not([name="first-name"][id="ln"]) 不匹配任何东西，所以反转匹配所有东西。）

[name="first-name"][id="ln"]

不选择任何内容，因为只有一个元素的 name 属性未设置为“first-name”，但其 id 属性为“ln”，无法匹配

input:not([name="first-name"]):not([id="ln"])

.