忽略子菜单的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，它是＆＃39;做的。

我用这个：

    .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在评论中提到的，这是特异性的一部分。

修改

这是一个工作片段：

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

为了将来参考，我还想指出ul中ul的正确语义是第二个ul位于其内部的li {{1}}

"The children (direct descendants) of a ul element must all be li elements "。我确保我的代码段会为您反映这一点。