css - 忽略子菜单 li 的 CSS nth-child？

Question

我正在尝试使用 CSS 中的 nth-child 选择器从我的移动菜单中隐藏多个菜单项。

这是源代码 HTML 和 CSS:https://jsfiddle.net/jf1r12wh/

HTML 是这样的:

<ul class="mobile">
<li>Item 1</l1>
<li>Item 2</li>
<li>Item 3</li>
<ul><li>Submenu item 1</li>
<li>Submenu item 2</li>
<li>Submenu item 3</li></ul></ul>

我想使用第 nth-child(或类似的)来隐藏移动菜单上的元素 1 和 2，但我不希望它隐藏它正在做的子菜单元素 1 和子菜单元素 2。

我正在使用这个:

    .mobile li:nth-child(1){
    display: none !important;
}

.mobile li:nth-child(2) {
    display: none !important;
}

问题是它也将此应用于子菜单。我怎样才能做到不这样做，只适用于主菜单项？

Answer 1

您所要做的就是通过使用 >

表明该规则只适用于直接子级

像这样:

.mobile > li:nth-child(2) {
    display: none !important;
}

正如 Paulie_D 在他的评论中提到的，这是特异性的一部分。

---

编辑:

这是一个工作片段:

.mobile li:nth-child(1){
    color: red;
}

.mobile > li:nth-child(2) {
    color: red;
}

<ul class="mobile">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>
    <ul>
      <li>Submenu item 1</li>
      <li>Submenu item 2</li>
      <li>Submenu item 3</li>
    </ul>
  </li>
</ul>

为了将来引用，我还想指出 ul 中的 ul 的正确语义是第二个 ul在它自己的 li

里面

"The children (direct descendants) of a ul element must all be li elements " .我已确保我的代码片段为您反射(reflect)了这一点。