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

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 元素，并使嵌套列表中的 span 元素忽略该规则？

是否可以在不专门重置第 2 级跨度的属性的情况下完成此操作？

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

Answer 1

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

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