8

使用 Sass 进行导航。我正在尝试使用 :last-child 选择器为最后一个菜单链接应用不同的链接颜色（红色），但没有成功。谁能告诉我如何从以下 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;
    }
}
4

2 回答 2

24

您的 CSS 已关闭。您的最后一行是针对 li 的最后一个子元素，它是锚标签的子元素。&此外，在定位您要嵌套的选择器的子项时，您不需要使用。

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

li:last-child a

它应该可以工作。您需要以链接为目标以覆盖您的原始链接声明。

于 2013-11-12T15:12:57.573 回答
6

以下选择器有效：

& li:last-child a

在这个演示小提琴中查看

不过，您不需要 &，因为它是自动添加的：

li:last-child a

在每种情况下，您都应该避免*选择器，它们的性能很糟糕。几乎在每种情况下，都有一个更好的选择器可以替换它。在你的情况下，

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

也工作。

&, a

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

于 2013-11-12T15:12:30.360 回答