Question

给出以下HTML：

<ul class="menu">
  <li class="active">
    Books
    <ul>
      <li>See All</li>
      <li>
        Crime
        <ul class="expected">
          <li>Agatha Cristie</li>
          <li>Tom Clancy</li>
        </ul>
      </li>
      <li>
        Cooking
        <ul>
          <li>Delia Smith</li>
          <li>Jamie Oliver</li>
        </ul>
      </li>
    </ul>
    </li>
    <li>
      Electronics
      <ul>
        <li>See All</li>
        <li>TVs</li>
      </ul>
      </ul>
    </li>
</ul>

并使用此选择器：

var activeItem = document.querySelector('.active');
var nestedMenu = activeItem.querySelector('ul > li > ul');

nestedMenu.classList.add('actual');

有人可以解释为什么选择器ul > li > ul不能获得第三深ul.expected，而是顶级ul.menu？

在这里小提琴：https://jsfiddle.net/dczat6g7/

这似乎是无效的结果，我希望找到.expected UL或null。我错过了什么吗？

Answer 1

来自querySelector的MDN文档：

返回第一个元素，该元素是调用它的元素的后代，它与指定的选择器组匹配。

这并不是说选择器是从指定的not开始应用的，只是将选择器的结果过滤到指定节点的后代。

IE中。它返回第一个节点，它位于选择器匹配的节点集中 - 全局 - 并且是activeItem的后代。

应用.actual的一个节点符合这两个标准。

所有浏览器都没有通用的CSS选择器方法，它将相对于另一个节点运行。对于非IE，您可以在CSS中包含:scope以相对于指定元素进行操作。通用的解决方案是使用id选择器。因此，您可以向起始节点添加一个id（或使用其现有的id），然后在CSS选择器中包含该id。

Answer 2

这是为什么

的另一个层次

var activeItem = document.querySelector('.active');
var nestedMenu = activeItem.querySelector('ul > li > ul > li > ul');

nestedMenu.classList.add('actual');

Working JSFiddle

所以如果你打破了这个，那就是第三级

[ul> li]第一级

[ul> li]二级

[ul]开始第3级

你所拥有的是第二级

document.querySelector直接后代问题

2 个答案: