为什么“document.querySelectorAll”只针对直接的孩子？
为什么“document.querySelectorAll”只针对直接的孩子？
提问于 2017-04-09 21:39:29
根据MDN页面 for 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一样。
这一切为什么要发生？是否有一种方法可以获得与querySelectorAll方法中的CSS相同的结果？
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-04-09 21:44:01
为什么“document.querySelectorAll”只针对直接的孩子？
它没有，它寻找所有的后代。
您正在使包含p元素的a元素粗体化，而a元素继承了这些元素；而a元素有它们自己的颜色。如果您反转粗体和颜色，使粗体被CSS应用，颜色由JavaScript应用，那么您将看到querySelectorAll正在做与CSS所做的相同的事情：
[].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>
是否有一种方法可以获得与
querySelectorAll方法中的CSS相同的结果？
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43315681
复制相关文章
相似问题
腾讯云开发者
