css – Chrome中嵌套了nth-child的querySelector似乎不起作用

前端之家收集整理的这篇文章主要介绍了css – Chrome中嵌套了nth-child的querySelector似乎不起作用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我一直在寻找在第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>

还有其他人看过这个问题吗?有办法解决这个问题吗?

解决方法

这对我来说在chrome中起作用,但它在FF中不起作用.
document.querySelector('#wonderful div:nth-child(2):nth-child(2)')

以下剪辑在两种浏览器中都有效,但我想你已经知道了

document.querySelector('#wonderful div:nth-child(2) div.blue')

所以看起来我的Chrome实现失败了.

猜你在找的CSS相关文章