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

你能看一下这个演示,让我知道为什么我无法使用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>

解决方法

你可能意味着：不是(：first-child)(首先没有CSS).有 :first但是用于打印：

The :first @page CSS pseudo-class describes the styling of the first
page when printing a document.

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>

或者李：不是(：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>

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