Question

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

主导航的最后一个类别（命名为login）应该看起来与其余类别不同，因此我只是通过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

如果您为无序的lis使用包装纸，则可以使用类似的

<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

如何排除孩子使用最后一个类型选择器？

1 个答案: