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

Question

我有一个包含下拉菜单的菜单。我想定位主菜单中的最后一个孩子，我通常会使用li:last-child，但在这种情况下，下拉菜单也是ul里面有li ，造成以下问题：

我在第二个ul添加了一个课程，并尝试使用:not(.sub-menu)忽略该下拉菜单。风格仍然适用。

HERE'S A WORKING FIDDLE

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内的.sub-menu也是外ul的后代。因此，您的选择器也会选择嵌套的li。

要解决此问题，请使用子选择器>仅选择ul的直接子项。

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

Demo

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;