问题描述
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.
;