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


<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 但它似乎不起作用,我也将样式应用到第二级


1236
2018-04-23 14:33


起源

什么元素是外部的父母 ul? - James Allardice
这是一个div?为什么这么重要? - Alex
看到我的回答。您可以将其用作选择器的起点。 - James Allardice
@Alex这很重要,因为任何只影响ul的第一级子节点的规则都会影响每个ul元素的第一级子节点,因此我们必须指定ul的父元素来设置样式,因此它是可选择的。 - squarephoenix


答案:


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

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

14
2018-04-23 14:36





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

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


1
2018-04-23 14:36





只要外在的父母 ul 不是另一个 li,你可以使用它作为你的选择器的起点(假设它是一个例子 div):

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

1
2018-04-23 14:37





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

0
2018-04-23 14:37



从问题:“这可以在没有专门重置二级跨度属性的情况下完成吗?” - James Allardice