CSS选择器除了第一个元素

在Web开发中，我们经常需要使用CSS来实现页面的样式设计。CSS选择器是用来选择元素并为其应用样式的一种重要工具。除了常见的选择器如类选择器、ID选择器和标签选择器外，还有一些特殊的选择器可以帮助我们更精确地找到需要样式的元素。本文将重点介绍CSS选择器中如何选择除第一个元素以外的其他元素。

:not()

:not()选择器用于选择除某个特定元素以外的其他所有元素。它的语法如下所示：

:not(selector)

其中，selector是任意有效的CSS选择器。例如，我们可以使用:not()选择器来选择除第一个段落以外的所有段落元素：

p:not(:first-of-type) {
  color: red;
}

这段代码表示选择所有不是第一个段落元素的段落，并将其文字颜色设置为红色。

:nth-child()

:nth-child()选择器用于选择某个元素的兄弟元素中特定位置的元素。它的语法如下所示：

:nth-child(an + b)

其中，a和b都是整数，an代表选择第n个元素，b代表偏移量。例如，我们可以使用:nth-child()选择器来选择除第一个列表项以外的其他所有列表项：

li:nth-child(n + 2) {
  background-color: lightgray;
}

这段代码表示选择除第一个列表项以外的所有列表项，并将它们的背景颜色设置为浅灰色。

:nth-of-type()

:nth-of-type()选择器与:nth-child()选择器类似，不同之处在于它只选择特定类型的元素。它的语法如下所示：

:nth-of-type(an + b)

与:nth-child()选择器相同，an和b都是整数，表示选择第n个特定类型的元素和偏移量。例如，我们可以使用:nth-of-type()选择器来选择除第一个div元素以外的其他所有div元素：

div:nth-of-type(n + 2) {
  border: 1px solid black;
}

这段代码表示选择除第一个div元素以外的所有div元素，并为它们添加黑色的边框。

示例代码

下面是一个简单的HTML代码片段，包含一些段落和列表项元素：

<!DOCTYPE html>
<html>
<head>
  <title>CSS选择器除了第一个元素</title>
  <style>
    p:not(:first-of-type) {
      color: red;
    }

    li:nth-child(n + 2) {
      background-color: lightgray;
    }

    div:nth-of-type(n + 2) {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <p>第一个段落</p>
  <p>第二个段落</p>
  <p>第三个段落</p>

  <ul>
    <li>第一个列表项</li>
    <li>第二个列表项</li>
    <li>第三个列表项</li>
  </ul>

  <div>第一个div元素</div>
  <div>第二个div元素</div>
</body>
</html>

通过上面的CSS样式代码，我们可以看到除了第一个段落以外的所有段落文字颜色都变成了红色，除了第一个列表项以外的所有列表项背景颜色都变成了浅灰色，除了第一个div元素以外的其他所有div元素都添加了黑色边框。