css - querySelector with nested nth-child in Chrome doesn't appear to work

Question

Welcome To Ask or Share your Answers For Others

css - querySelector with nested nth-child in Chrome doesn't appear to work

posted Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

css - querySelector with nested nth-child in Chrome doesn't appear to work

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?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-23T17:53:36+0000

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.

Categories

css - querySelector with nested nth-child in Chrome doesn't appear to work

css - querySelector with nested nth-child in Chrome doesn't appear to work

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags