忽略子菜单:不是在样式<li>时

Question

我有一个包含下拉菜单的菜单.我想针对在主菜单中,我通常会做的最后一个孩子li:last-child,然而,在这种情况下,下拉菜单也是ul与li内,创建以下问题:

我在第2节添加了一个类,ul并试图通过使用忽略下拉菜单:not(.sub-menu).风格仍然适用.

这是一个工作的好消息

HTML

<ul>
    <li>point1</li>
    <li>point2</li>
    <li>point3</li>
    <li>
        point4
        <ul class="sub-menu">
            <li>point4.1</li>
            <li>point4.2</li>
            <li>point4.3</li>
            <li>point4.4</li>
        </ul>
    </li>
    <li>point5</li>
    <li>point6</li>
</ul>

CSS

ul {
    background: lightgrey;
}

ul.sub-menu {
    background: skyblue;
}

ul:not(.sub-menu) li:last-child {
    background: red;
}

我真的希望我:not(.sub-menu)会确保只有主菜单的最后一个孩子成为目标,但我可能不完全明白它是如何:not()工作的.

Answer 1

你正在选择ul哪个没有.sub-menu上课.但li里面的s .sub-menu也是外部的后代ul.因此,您的选择器也将选择嵌套li.

要解决此问题,请使用children选择器>仅选择直接子项ul.

ul:not(.sub-menu) > li:last-child {

演示

ul {
  background: lightgrey;
}
ul.sub-menu {
  background: skyblue;
}
ul:not(.sub-menu) > li:last-child {
  background: red;
}

<ul>
  <li>point1</li>
  <li>point2</li>
  <li>point3</li>
  <li>
    point4
    <ul class="sub-menu">
      <li>point4.1</li>
      <li>point4.2</li>
      <li>point4.3</li>
      <li>point4.4</li>
    </ul>
  </li>
  <li>point5</li>
  <li>point6</li>
</ul>