不能跳过将CSS规则添加到第一个li元素使用not(first)

时间:2016-06-23 20:31:27

标签: css css3

请您看一下这个演示,让我知道为什么我无法使用not选项将css规则添加到第一个项目中?

li:not(first) {
  color: red;
}
<ul>
  <li>Item 1</li>
  <li>Item 2
    <ul>
      <li>Item 2-1</li>
      <li>Item 2-2</li>
      <li>Item 2-3</li>
      <li>Item 2-4</li>
    </ul>
  </li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

2 个答案:

答案 0 :(得分:5)

你可能意味着:not(:first-child)(没有CSS first)。有:first但是有用于打印的内容:

  

:first @page CSS伪类描述了第一个的样式   打印文档时的页面。

&#13;
&#13;
li:not(:first-child){  color:red;  }
&#13;
<ul>
        <li>Item 1</li>
        <li>Item 2
                <ul>
                    <li>Item 2-1</li>
                    <li>Item 2-2</li>
                    <li>Item 2-3</li>
                    <li>Item 2-4</li>
                </ul>
         </li>
        <li>Item 3</li>
        <li>Item 4</li>
</ul>
&#13;
&#13;
&#13;

你也可以li:not(:first-of-type)

&#13;
&#13;
li:not(:first-of-type){  color:red;  }
&#13;
<ul>
        <li>Item 1</li>
        <li>Item 2
                <ul>
                    <li>Item 2-1</li>
                    <li>Item 2-2</li>
                    <li>Item 2-3</li>
                    <li>Item 2-4</li>
                </ul>
         </li>
        <li>Item 3</li>
        <li>Item 4</li>
</ul>
&#13;
&#13;
&#13;

li:not(:nth-child(1))

&#13;
&#13;
li:not(:nth-child(1)){  color:red;  }
&#13;
<ul>
        <li>Item 1</li>
        <li>Item 2
                <ul>
                    <li>Item 2-1</li>
                    <li>Item 2-2</li>
                    <li>Item 2-3</li>
                    <li>Item 2-4</li>
                </ul>
         </li>
        <li>Item 3</li>
        <li>Item 4</li>
</ul>
&#13;
&#13;
&#13;

li:not(:nth-of-type(1))

&#13;
&#13;
li:not(:nth-of-type(1)){  color:red;  }
&#13;
<ul>
        <li>Item 1</li>
        <li>Item 2
                <ul>
                    <li>Item 2-1</li>
                    <li>Item 2-2</li>
                    <li>Item 2-3</li>
                    <li>Item 2-4</li>
                </ul>
         </li>
        <li>Item 3</li>
        <li>Item 4</li>
</ul>
&#13;
&#13;
&#13;

顺便说一下,如果你想知道为什么内部列表没有第一个元素的颜色改变它,因为颜色是一个继承的属性。

答案 1 :(得分:2)

你的语法错误

 li:not(:first-child)