Html 如何使用css N子项使上一个导航链接具有不同的颜色

我似乎无法使用css第n个子项或使用替代类“JOIN”并添加gold值（#ba9a45），将导航栏中的JOIN链接设置为金色（#ba9a45）

这是我目前的代码：

<ul>
  <li><a href="index.html">HOME</a></li>
  <li><a href="#">CASINO</a></li>
  <li><a href="#">HOTEL</a></li>
  <li><a href="#">ENTERTAINMENT</a></li>
  <li><a href="#">EVENTS</a></li>
  <li><a href="#">MEMBERS</a></li>
  <li><a href="#" class="join">JOIN</a></li>
</ul>

使用class=“join”

---

如何使用第n个子类和类“join”来解决此问题？

Add&before join类

.navbar li a{
  &.join{
    color: #ba9a45;
  }
}

css演示

.navbar li a.join{
颜色：#ba9a45；
}

您可以通过以下方法之一实现此目的。还要确保相关的父div或

具有

.navbar

.navbar li:last-child a {
  color: #ba9a45;
}

或：

如果父div具有类

.navbar

，则正确的CSS为：

.navbar ul li:last-child a {
  color: #ba9a45;
}

---

您的

缺少类

navbar

。另外，

n个最后的子项

应包含一个

（1）

。最后，最后一个子选择器应该在
• 标记上，而不是标记上。这里：

  .navbar li:n最后一个孩子（1）a{color:red；}

  .navbar li:last-child a {
    color: #ba9a45;
  }
  

  .navbar li a.join {
    color: #ba9a45;
  }
  

  .navbar ul li:last-child a {
    color: #ba9a45;
  }