<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
但它似乎不起作用,我也将样式应用到第二级
例如,将列表放在带有ID的包装div中 <div id="ul-wrapper">
,并尝试:
#ul-wrapper > ul > li > span {
/* my specific CSS */
}
#container > ul > li span { /* - Your CSS Here - */ }
需要指定容器,以便只选择第一级ul。
只要外在的父母 ul
不是另一个 li
,你可以使用它作为你的选择器的起点(假设它是一个例子 div
):
div > ul > li span {
/* Whatever */
}
ul > li > span {border:solid 1px red;}
li > ul > li > span {border:none 1px red;};