css - 如何使用 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;
    }

如何仅定位第二个下拉项目？

标签： csssasscss-selectors

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>