在前端开发中，我们经常需要为页面的不同元素设置不同的样式。有时我们希望对除了第一个或最后一个元素以外的所有元素应用同一种样式，这时该怎么做呢？本文将介绍如何使用 CSS 选择器来实现这一目标。
CSS 选择器
在 CSS 中，我们可以使用选择器来选中 HTML 元素，并为其应用样式。常见的选择器包括：
- 标签选择器（tag selector）：根据 HTML 标签名称选中元素，例如
p、h1。 - 类选择器（class selector）：根据元素的 class 属性选中元素，例如
.header、.btn。 - ID 选择器（id selector）：根据元素的 id 属性选中元素，例如
#logo、#nav。
除此之外，还有一些其他的选择器，如属性选择器、伪类选择器等。下面我们将重点介绍两个与本文相关的选择器：通配符选择器和 :not() 伪类选择器。
通配符选择器
通配符选择器 * 可以匹配 HTML 文档中的任何元素，对于某些情况下需要选中所有元素的样式设置非常有用。例如，要设置所有元素的字体大小为 16px，可以使用下面的代码：
* {
font-size: 16px;
}这会将整个页面中所有元素的字体大小都设为 16px。不过这样做显然并不能达到我们的目标——只选中除了第一个或最后一个元素以外的所有元素。
:not() 伪类选择器
:not() 伪类选择器可以选中除了指定元素以外的所有元素。它的语法如下：
:not(selector)
其中 selector 是一个 CSS 选择器，表示要排除掉的元素。例如，要选中除了第一个元素以外的所有元素，可以使用下面的代码：
li:not(:first-child) {
color: red;
}这会将 li 元素中除了第一个子元素以外的所有子元素的文字颜色设置为红色。同样地，要选中除了最后一个元素以外的所有元素，可以使用 :not(:last-child) 选择器。
示例代码
下面是一个示例代码，演示如何使用 :not() 伪类选择器选中除了第一个和最后一个元素以外的所有元素，并对其应用样式：
-- -------------------- ---- -------
----
------- ------
------- ------
------- ------
------- ------
------- ------
-----
-------
-- ------------ -- --------- --
------------------------------------- -
------ ----
------------ -----
-
--------运行上述代码后，列表项 2、3、4 的文字颜色将变为红色，并加粗显示。
总结
本文介绍了如何使用 CSS 选择器来选中除了第一个或最后一个元素以外的所有元素，并对其应用样式。通过使用 :not() 伪类选择器，我们可以方便地实现这一目标。希望本文能够对你的前端开发工作有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/606ef90c2d2a29a3c1202a34