如何使用 SASS 定位列表的最后一个孩子

Question

我的 HTML 结构是这样的 -

    <ul id="primary-menu">
      <li class="menu-item">
        <a>Item 1</a>
        <ul class="dropdown-menu">
           <li class="menu-item">
              <a>Dropdown Item 1</a>
           </li>
        </ul>
      </li>
      <li class="menu-item">
        <a>Item 2</a>
        <ul class="dropdown-menu">
           <li class="menu-item">
              <a>Dropdown Item 2</a>
           </li>
        </ul>
      </li>
    </ul>

我正在尝试定位下拉菜单中的最后一项，“下拉项 2”

这是我的 SASS -

    #primary-menu {
      .dropdown-menu {
         &:last-child {
          .dropdown-item {
            width: 424px;
          }
       }
     }
    }

但我的宽度样式显示在这两个项目上。在开发工具中它看起来像这样 -

    #primary-menu .dropdown-menu:last-child .dropdown-item {
    width: 424px;
    }

如何只定位第二个下拉项？

Answer 1

对于您的特定 html

#primary-menu > .menu-item:last-child .menu-item:last-child { ... }

如果用 SASS 编写，会是这样的

#primary-menu {
  > .menu-item:last-child .menu-item:last-child { 
    ...
  }
}

这是假设您在下拉菜单中有更多项目。

您的 css 不起作用，因为您有多个下拉菜单，并且它们都是其父容器的最后一个子容器，因此它将针对所有容器。

您需要定位作为 primary-menu 子级的最后一个菜单项，然后定位最后一个子级菜单项。

#primary-menu > .menu-item:last-child .menu-item:last-child {
  background: green;
  width: 424px;
}

<ul id="primary-menu">
  <li class="menu-item">
    <a>Item 1</a>
    <ul class="dropdown-menu">
      <li class="menu-item">
        <a>Dropdown Item 1</a>
      </li>
    </ul>
  </li>
  <li class="menu-item">
    <a>Item 2</a>
    <ul class="dropdown-menu">
      <li class="menu-item">
        <a>Dropdown Item 2</a>
      </li>
    </ul>
  </li>
</ul>