如何使用 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 > .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>

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

How to target last child of a list with SASS

css

sass

css-selectors