为什么'document.querySelectorAll'仅针对直接孩子？

Question

按照MDN页面的document.querySelectorAll,语法是

elementList = document.querySelectorAll(selectors);

哪里

*selectors* is a string containing one or more CSS selectors separated by commas

但这似乎不适用于通配符子选择器.请考虑以下HTML

<div id="container">
  <p>One <a href="#">Link One</a> </p>
  <p>Two <a href="#">Link Two</a> </p>
  <p>Three <a href="#">Link Three</a> </p>

  <a href=#>Outer Link One</a>
  <a href=#>Outer Link Two</a>
  <a href=#>Outer Link Three</a>
</div>

使用以下JS

[].forEach.call(document.querySelectorAll('#container *:not(a)'), 
function(node) {
  node.style.fontWeight = 'bold';
});

和以下CSS

#container {
  border: 1px solid #888;
  border-radius: 5px;
  padding: 10px;
}

#container *:not(a) {
  color: green;
}

您将看到css *:not(a)排除了样式中的所有锚标记,而JS中使用的相同选择器似乎只排除了直接子项的锚标记,就#container好像它是#container > a

为什么会这样？有没有办法在方法中获得与CSS相同的结果querySelectorAll？

JS小提琴

Answer 1

为什么'document.querySelectorAll'仅针对直接孩子？

它没有,它寻找所有的后代.

你正在使p包含a元素的元素变为粗体,并且a元素继承了那些元素; 而a元素有自己的颜色.如果你颠倒粗体和颜色,那么粗体是由CSS和颜色应用的,你会看到querySelectorAllCSS正在做同样的事情:

[].forEach.call(document.querySelectorAll('#container *:not(a)'), 
function(node) {
  node.style.color = "green";
});

#container {
  border: 1px solid #888;
  border-radius: 5px;
  padding: 10px;
}

#container *:not(a) {
  font-weight: bold;
}

<div id="container">
  <p>One <a href="#">Link One</a> </p>
  <p>Two <a href="#">Link Two</a> </p>
  <p>Three <a href="#">Link Three</a> </p>

  <a href=#>Outer Link One</a>
  <a href=#>Outer Link Two</a>
  <a href=#>Outer Link Three</a>
</div>

有没有办法在方法中获得与CSS相同的结果querySelectorAll？

CSS querySelectorAll已经解决了相同的问题.:-)如果你想要的a元素不是粗体,你必须告诉他们不要从他们的祖先那里继承:

#container a {
  font-weight: normal;
}

例:

[].forEach.call(document.querySelectorAll('#container *:not(a)'), 
function(node) {
  node.style.fontWeight = "bold";
});

#container {
  border: 1px solid #888;
  border-radius: 5px;
  padding: 10px;
}

#container *:not(a) {
  color: green;
}
#container a {
  font-weight: normal;
}

<div id="container">
  <p>One <a href="#">Link One</a> </p>
  <p>Two <a href="#">Link Two</a> </p>
  <p>Three <a href="#">Link Three</a> </p>

  <a href=#>Outer Link One</a>
  <a href=#>Outer Link Two</a>
  <a href=#>Outer Link Three</a>
</div>