无法使用Not (第一)将CSS规则添加到第一个li元素

Question

请您看一下这个演示程序，让我知道为什么我不能使用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>

​

Answer 1

您可能是指:not(:first-child) (没有CSS first)。有:first，但这是用于打印的：

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

​

li:not(:first-child){  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>

​

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

​

li:not(:first-of-type){  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>

​

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

​

li:not(:nth-child(1)){  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>

​

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

​

li:not(:nth-of-type(1)){  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>

​

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

Answer 2

你的语法弄错了

 li:not(:first-child)