在菜单中为Sass应用最后一个子选择器

Question

使用Sass进行导航.我正在尝试使用:最后一个子选择器为最后一个菜单链接应用不同的链接颜色(红色)但没有成功.任何人都可以告诉我如何从以下Sass代码实现？下面是我到目前为止的代码.任何建议将不胜感激!

HTML

<ul class="menu">
   <li>
       My Navigation
   </li>
   <li>
       <a href="#">First Link</a>
   </li>
   <li>
       <a href="#">Second Link</a>
   </li>
   <li>
       <a href="#">Third Link</a>
  </li>
</ul>

萨斯

.menu {
    @include inline-list;
    font-size: 13px;


    &, a {
        color: black;
        text-decoration: none;

    }
    > * + * {
        margin-left: .5em;

        + *:before {
            content: ">";
            margin-right: .5em;
        }
    }

    & a ul li:last-child {
        color: red;
        font-weight: bold;
    }
}

Answer 1

你的CSS已关闭.您的最后一行是针对li的最后一个子节点,它是一个锚标记的子节点.此外,您无需&在定位要嵌套的选择器的子项时使用.

因此,将您的最后一个孩子选择更改为:

li:last-child a

它应该工作.您需要定位链接以覆盖原始链接声明.

Answer 2

以下选择器有效:

& li:last-child a

在这个演示小提琴中查看它

你不需要&,因为它是自动前置的:

li:last-child a

在每种情况下你应该避免*选择器,他们有可怕的表现.几乎在所有情况下,都有一个更好的选择器可以替换它.在你的情况下,

> li + li {
/*and*/
    &:before {
    }

也工作.

&, a

因为&简单地解析为父选择器也没有多大意义.除非您打算这样做,否则要编写DRY代码,将这两个声明放在父块中并省略&它将是更好的选择.