css - 如何排除 child 应用最后类型选择器？

Question

我设置了一个简单的基于 CSS 的下拉导航。

主导航的最后一个类别(名为登录)应该看起来与其他类别不同，因此我只是通过 last-of-type 应用了不同的样式。

然而，样式现在也应用于下拉菜单，这意味着下拉菜单的最后一项表示样式也已应用。

(此外，我无法使用 nth-... 选择器来定位它们，因为每隔一段时间就会添加/删除新类别。)

如何阻止这种形式的发生？

<ul>
  <li>item 1
    <ul>
      <li>subitem 1</li>
      <li>subitem 2</li>
      <li>subitem 3</li>  <-- unfortunately different style also...
    </ul>
  </li>
  <li>item 2</li>
  <li>item 3</li>
  <li>login</li>  <-- different stlye
</ul>

Answer 1

如果你对你的无序列表使用换行，你可以使用类似这样的东西

<div class="test">
<ul>
  <li>item 1
    <ul>
      <li>subitem 1</li>
      <li>subitem 2</li>
      <li>subitem 3</li>  <!-- unfortunately different style also...-->
    </ul>
  </li>
  <li>item 2</li>
  <li>item 3</li>
  <li>login</li>  <!-- different stlye -->
</ul>
</div>

所以 CSS

.test > ul > li:last-of-type{color:red;}

只为div.test后的第一个ul设置样式，不影响其他嵌套元素

Codepen