Question

<ul>
  <li> <span> apply </span> </li>
  <li> <span> apply </span> </li>
  <li> 
    <ul>
      <li> <span> ignore </span> </li>
      <li> <span> ignore </span> </li>
    </ul>
  </li>
</ul>

如何仅将CSS规则应用于跨越第一级的元素，并使嵌套列表中的span元素忽略该规则？

这可以在没有专门重置二级跨度属性的情况下完成吗？

尝试了ul > li span，但它似乎不起作用，我也将样式应用到第二级

Answer 1

将您的列表放在带有ID的包装div中，例如<div id="ul-wrapper">，然后尝试：

#ul-wrapper > ul > li > span {
    /* my specific CSS */
}

Answer 2

 #container >  ul > li span { /* - Your CSS Here - */  }

需要指定容器，以便只选择第一级ul。

Answer 3

只要外部ul的父级不是另一个li，您就可以将其用作选择器的起点（例如假设它是div）：< / p>

div > ul > li span {
    /* Whatever */
}

Answer 4

ul > li > span {border:solid 1px red;}
li > ul > li > span {border:none 1px red;};

仅在第一级中的子元素上应用样式

4 个答案: