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的父级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

为此您需要 n-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，请使用＆gt; 这样的

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

查看此链接以获取有用的n-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

的元素

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

4 个答案: