如何使用SASS选中列表结构中的最后一个下拉菜单项

问题根因 #

你当前写法的匹配逻辑是「所有作为父元素最后一个子元素的.dropdown-menu」，而你的两个.dropdown-menu分别是两个一级.menu-item的最后一个子元素，所以两个下拉菜单的菜单项都会命中样式。

正确SASS写法 #

你需要先选中一级菜单的最后一个.menu-item，再匹配它内部的下拉菜单项即可，注意你的HTML里下拉菜单项的类是menu-item，若你实际项目中已经替换为dropdown-item，替换对应类名即可：

#primary-menu {
  // 匹配最后一个一级菜单项
  .menu-item:last-child {
    .dropdown-menu {
      .menu-item {
        width: 424px;
      }
    }
  }
}

上述代码编译后生成的CSS为：

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

就只会命中第二个下拉菜单里的「Dropdown Item 2」元素。

内容的提问来源于stack exchange，提问作者jfc