如何使用css排除某些特定元素的样式？

Question

<div id="header" class="top-bar">
...
</div>

<div id="specificdiv" class="top-bar">
    <ul>
        <li>
            <li class="dropdown active">
            <li class="dropdown active">
            <li class="dropdown active">
        <li>
    </ul>
</div>

<div id="footer" class="top-bar">
...
</div>

我需要排除特定<li>标记在div id="specificdiv"下的样式。我可以使用以下方法排除第一个元素

.top-bar li:not(:first-of-type) {
    float: none;
}

但是如何去除rest 2呢？

Answer 1

使用直接后代选择器>。它只选择目标父母的直系后代。

您可以使用#specificdiv ul > li，它将只在第一级的子级上选择li。

正如BoltClock所指出的，您应该将其父级为li的li包装在ul中。

<div id="specificdiv" class="top-bar">
  <ul>
    <li>
      <ul>
        <li class="dropdown active">
        <li class="dropdown active">
        <li class="dropdown active">
      </ul>
    <li>
  </ul>
</div>

Answer 2

为此，您需要nth-child(an+b)，您可以这样使用它

li:nth-child(2){
  ..
}
li:nth-child(3){
  ..
}

现在你有很多选择

ul li:nth-child(3n+3) {  
  color: #ccc;
}



li:nth-child(4n-7) {  /* or 4n+1 */
    color: green;   
}

如果您想检查特殊的lis，请使用下面的>

div#pecificdiv ul.myList >li:nth-child(odd) {
    color: green;   
}

请查看此链接以获得有用的nth-子菜谱。

http://css-tricks.com/useful-nth-child-recipies/

还有这个

http://css-tricks.com/how-nth-child-works/

Answer 3

为什么不直接为<li>添加类呢？示例：

<ul>
    <li class="someClass">
        <li class="dropdown active">
        <li class="dropdown active">
        <li class="dropdown active">
    <li>
</ul>

然后你的风格：

.someClass{
     float:none;
  }