在 Chrome 中嵌套 nth-child 的 querySelector 似乎不起作用

querySelector with nested nth-child in Chrome doesn#39;t appear to work(在 Chrome 中嵌套 nth-child 的 querySelector 似乎不起作用)
本文介绍了在 Chrome 中嵌套 nth-child 的 querySelector 似乎不起作用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着跟版网的小编来一起学习吧!

问题描述

I've been looking at using nth-child within an nth-child selector to find an element. This appears to work in Firefox, but does not seem to be working on chrome. Here's my test file:

<!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>

Has anyone else seen this issue? Have a solution to get around this?

解决方案

This worked for me in chrome, but it does not work in FF then.

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

The following snipped works in both browsers, but I assume you know that already

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

So it looks like an implementation failure in chrome for me.

这篇关于在 Chrome 中嵌套 nth-child 的 querySelector 似乎不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

:hover:before text-decoration none has no effects?(:hover:before text-decoration none 没有效果?)
Is CSS faster when you are specific?(当您特定时,CSS 会更快吗?)
CSS sibling selectors (select all siblings)(CSS 兄弟选择器(选择所有兄弟))
IE: nth-child() using odd/even isn#39;t working(IE:使用奇数/偶数的 nth-child() 不起作用)
How can I tell if an element is in a shadow DOM?(如何判断一个元素是否在影子 DOM 中?)
Can I use CSS to add a bullet point to any element?(我可以使用 CSS 为任何元素添加项目符号吗?)