在 Chrome 中嵌套 nth-child 的 querySelector 似乎不起作用
Posted
技术标签:
【中文标题】在 Chrome 中嵌套 nth-child 的 querySelector 似乎不起作用【英文标题】：querySelector with nested nth-child in Chrome doesn't appear to work 【发布时间】：2011-09-14 18:42:14 【问题描述】：我一直在研究在 nth-child 选择器中使用 nth-child 来查找元素。这似乎适用于 Firefox，但似乎不适用于 chrome。这是我的测试文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>untitled</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript" charset="utf-8">
myFunc = function()
if(document.querySelector('#wonderful DIV:nth-child(2) DIV:nth-child(2)'))
alert("found the element");
else
alert("element not found");
;
</script>
</head>
<body onLoad="myFunc()">
<div id="wonderful">
<div>
</div>
<div >
<div>
</div>
<div class="blue">
find me!
</div>
</div>
</div>
</body>
</html>
有其他人看到这个问题吗？有解决办法吗？
【问题讨论】：
【参考方案1】：这在 chrome 中对我有用，但在 FF 中不起作用。
document.querySelector('#wonderful div:nth-child(2):nth-child(2)')
以下截图适用于两种浏览器，但我想你已经知道了
document.querySelector('#wonderful div:nth-child(2) div.blue')
所以对我来说，这看起来像是 chrome 中的实现失败。
【讨论】：
是的，非常有趣。第一个没试过，第二个就知道了。如果能在不使用 XPath 的情况下使用跨浏览器的方式来执行此操作，那就太好了。 你的第一个 sn-p 没有意义。嗯，确实如此，但:nth-child(2):nth-child(2) 与:nth-child(2) 相同...
@BoltClock 你是对的，这没有意义，但它有效。这就是为什么我认为这是 chrome 中的一个实现错误。
@DanielB 我认为这可能是一个错误，因为我一直在尝试 :not():not() 并且它似乎只尊重第一个.. 但是 css 选择了正确的元素，但javascript没有。尚未检查其他浏览器。【参考方案2】：
在寻找红鲱鱼时发现了这个（非常古老的）问题。这个答案是要注意的：今天，Chrome v73 工作得很好。这里的片段证明了这一点：
const sel = '#wonderful div:nth-child(2) div:nth-child(2)';
console.log(document.querySelector(sel)) <div id="wonderful">
<div></div>
<div>
<div></div>
<div class="blue">find me!</div>
</div>
</div>【讨论】：
以上是关于在 Chrome 中嵌套 nth-child 的 querySelector 似乎不起作用的主要内容，如果未能解决你的问题，请参考以下文章
nth-child自定义：用Unicode字符替换项目符号，并且不适用于嵌套的