JavaScript QuerySelector 不返回最后一个 child

Question

我正在尝试选择 .nav-item 类的最后一个子元素，我已经尝试了几种方法。它不抓取项目，只返回“null”，应用样式将抓取第一个项目或返回以下错误:

ma​​in.js:25 未捕获类型错误:无法读取 null 的属性“样式” 在 main.js:25

我的代码:

顶部工作正常并且确实应用了边框，但我想在最后一项的右侧应用边框，在第一项的左侧应用边框。最后一项不起作用。

谁能指出我的错误？HTML 如果有帮助:

let items = document.querySelectorAll('.nav-item');

for (let i = 0; i < items.length; i++) {
  items[i].style.borderTop = '0.2em solid white';
  items[i].style.borderBottom = '0.2em solid white';
}

// First and Last Item
// var secondItem = document.querySelector('.list-group-item:nth-child(2)');
// secondItem.style.color = 'coral';

let lastItem = document.querySelector('.nav-item:nth-child(4)');

console.log(lastItem);

lastItem.style.borderRight = '0.2em solid white';

<nav>
  <h1>Item Lister</h1>
  <ul class="nav" id="list">
    <a href="#"><li class="nav-item">One</li></a>
    <a href="#"><li class="nav-item">One</li></a>
    <a href="#"><li class="nav-item">One</li></a>
    <a href="#"><li class="nav-item">One</li></a>
  </ul>
</nav>

Answer 1

所以你的 <nav>元素有一个 child :<ul> . <a>元素是 <ul> 的子元素.

要解决此问题，您需要查询选择 .nav-item ul:nth-child(4) .

这里有一些东西可以更好地形象化它。 <nav>是 <ul> 的父级，谁是 <a> 的父级秒。这使得 <nav> <a> 的祖 parent

nav
  ul
    a
      li
    a
      li
    a
      li
    a
      li

也很重要，就像 Karl-André Gagnon 所说的那样，确保 <li>是 <ul> 的 child :

nav
  ul
    li
      a
    li
      a
    li
      a
    li
      a