17 
<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 元素忽略该规则？

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

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

4

4 回答 4

20

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

#ul-wrapper > ul > li > span {
    /* my specific CSS */
}
于 2012-04-23T14:36:26.290 回答
1 
 #container >  ul > li span { /* - Your CSS Here - */  }

需要指定一个容器，这样只能选择第一级ul。

于 2012-04-23T14:36:54.363 回答
1

只要外部的父级ul不是 another li，您就可以将其用作选择器的起点（例如假设它是 a div）：

div > ul > li span {
    /* Whatever */
}
于 2012-04-23T14:37:11.737 回答
0 
ul > li > span {border:solid 1px red;}
li > ul > li > span {border:none 1px red;};
于 2012-04-23T14:37:08.937 回答