我一直在寻找在第n个子选择器中使用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>
还有其他人看过这个问题吗?有办法解决这个问题吗?
答案 0 :(得分:13)
这对我来说在chrome中起作用,但它在FF中不起作用。
document.querySelector('#wonderful div:nth-child(2):nth-child(2)')
以下剪辑在两种浏览器中都有效,但我猜你已经知道了
document.querySelector('#wonderful div:nth-child(2) div.blue')
所以看起来我的Chrome实现失败了。
答案 1 :(得分:1)
在搜寻红色鲱鱼时发现了这个(非常古老的)问题。要注意这个答案:今天,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>