css 在Chrome中嵌套第n个子项的查询语句似乎不起作用

waxmsbnn 于 2023-10-21 发布在其他

关注(0)|答案(3)|浏览(99)

我一直在研究在第n个子选择器中使用第n个子选择器来查找元素。这似乎在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>

有其他人看到这个问题吗？有办法解决这个问题吗？

css

来源：https://stackoverflow.com/questions/6345358/queryselector-with-nested-nth-child-in-chrome-doesnt-appear-to-work

3条答案

按热度按时间

ugmeyewa1#

这在Chrome中对我有效，但在FF中不起作用。

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

下面的snipped在两种浏览器中都可以工作，但我假设您已经知道了

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

所以对我来说，这看起来像是Chrome中的一个实现失败。

赞(0）回复(0）举报 2023-10-21

iih3973s2#

在寻找一条红鲱鱼的时候发现了这个（非常古老的）问题。这个答案是要注意的：今天，Chrome v73运行得很好。这里的Sniffy证明了这一点：

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>

赞(0）回复(0）举报 2023-10-21

fcy6dtqo3#

尝试一个测试代码输出文本：

document.querySelector('div#wonderful div.blue').innerText

或

document.querySelector('div#wonderful div').nextSibling.nextSibling.innerText

比如？

赞(0）回复(0）举报 2023-10-21

我来回答

css 在Chrome中嵌套第n个子项的查询语句似乎不起作用

3条答案

相关问题

热门标签

最新问答