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

查看in this demo fiddle

你不需要＆amp;但是，因为它是自动添加的：

li:last-child a

在每种情况下，你应该避免使用*选择器，它们的表现非常糟糕。几乎在所有情况下，都有一个更好的选择器可以替换它。在你的情况下，

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

也可以。

&, a

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

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

2 个答案: