html - 如何使用 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;
}

但是如何删除其余 2 呢？

Answer 1

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

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

正如 BoltClock 指出的那样，您应该将li其父级是 a 的li内部包装起来 a 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-child 食谱

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;
  }

Answer 4

#specificdiv li:not(:first-of-type) 
{
     float: none;
}

它会起作用的。

# 用于按 id 选择元素。例如 #my 将选择具有 id=my 的元素