CSS 选择器：第一个、最后一个、单双、奇偶、第n个、反选

在前端开发中，CSS 选择器是非常重要的一部分，它能够帮助我们对页面上的元素进行精准的定位和样式的设置。本文将详细介绍CSS选择器中的几个常见用法，包括第一个、最后一个、单双、奇偶、第n个以及反选。

1. 第一个元素选择器

如果想要选取第一个元素，我们可以使用 :first-child 伪类选择器。例如，有如下HTML代码:

<ul>
  <li>第一个元素</li>
  <li>第二个元素</li>
  <li>第三个元素</li>
</ul>

我们想要给第一个元素添加特定的样式，可以通过CSS选择器来实现：

li:first-child {
  color: red;
}

代码运行结果：

• 第一个元素：红色字体
• 第二个元素和第三个元素：默认样式

2. 最后一个元素选择器

如果想要选取最后一个元素，我们可以使用 :last-child 伪类选择器。例如，有如下HTML代码:

<ul>
  <li>第一个元素</li>
  <li>第二个元素</li>
  <li>最后一个元素</li>
</ul>

我们想要给最后一个元素添加特定的样式，可以通过CSS选择器来实现：

li:last-child {
  color: blue;
}

代码运行结果：

• 第一个元素和第二个元素：默认样式
• 最后一个元素：蓝色字体

3. 单数元素选择器

如果想要选取单数位置的元素，我们可以使用 :nth-child(odd) 伪类选择器。例如，有如下HTML代码:

<ul>
  <li>第一个元素</li>
  <li>第二个元素</li>
  <li>第三个元素</li>
</ul>

我们想要给单数位置的元素添加特定的样式，可以通过CSS选择器来实现：

li:nth-child(odd) {
  background-color: #f2f2f2;
}

代码运行结果：

• 第一个元素和第三个元素：浅灰色背景
• 第二个元素：默认样式

4. 双数元素选择器

如果想要选取双数位置的元素，我们可以使用 :nth-child(even) 伪类选择器。例如，有如下HTML代码:

<ul>
  <li>第一个元素</li>
  <li>第二个元素</li>
  <li>第三个元素</li>
</ul>

我们想要给双数位置的元素添加特定的样式，可以通过CSS选择器来实现：

li:nth-child(even) {
  background-color: #ccc;
}

代码运行结果：

• 第一个元素和第三个元素：默认样式
• 第二个元素：浅灰色背景

5. 奇数元素选择器

如果想要选取奇数位置的元素，我们可以使用 :nth-child(odd) 伪类选择器。例如，有如下HTML代码:

<ul>
  <li>第一个元素</li>
  <li>第二个元素</li>
  <li>第三个元素</li>
  <li>第四个元素</li>
</ul>

我们想要给奇数位置的元素添加特定的样式，可以通过CSS选择器来实现：

li:nth-child(odd) {
  font-weight: bold;
}

代码运行结果：

• 第一个元素、第三个元素：加粗字体
• 第二个元素、第四个元素：默认样式

6. 偶数元素选择器

如果想要选取偶数位置的元素，我们可以使用 :nth-child(even) 伪类选择器。例如，有如下HTML代码:

<ul>
  <li>第一个元素</li>
  <li>第二个元素</li>
  <li>第三个元素</li>
  <li>第四个元素</li>
</ul>

我们想要给偶数位置的元素添加特定的样式，可以通过CSS选择器来实现：

li:nth-child(even) {
  text-decoration: underline;
}

代码运行结果：

• 第一个元素、第三个元素：默认样式
• 第二个元素、第四个元素：下划线效果

7. 第n个元素选择器

如果想要选取特定位置的元素，我们可以使用 :nth-child(n) 伪类选择器，其中 n 可以是一个具体的数字。例如，有如下HTML代码:

<ul>
  <li>第一个元素</li>
  <li>第二个元素</li>
  <li>第三个元素</li>
  <li>第四个元素</li>
</ul>

我们想要给第三个元素添加特定的样式，可以通过CSS选择器来实现：

li:nth-child(3) {
  color: green;
}

代码运行结果：

• 第一个元素、第二个元素、第四个元素：默认样式
• 第三个元素：绿色字体

8. 反选选择器

如果想要选取除特定元素以外的所有元素，我们可以使用 :not 选择器。例如，有如下HTML代码:

<ul>
  <li>第一个元素</li>
  <li>第二个元素</li>
  <li>第三个元素</li>
  <li>第四个元素</li>
</ul>

我们想要给除了第三个元素以外的所有元素添加特定的样式，可以通过CSS选择器来实现：

li:not(:nth-child(3)) {
  opacity: 0.5;
}

代码运行结果：

• 第三个元素：默认样式
• 第一个元素、第二个元素、第四个元素：半透明效果

通过本文的介绍，我们学习了CSS选择器中一些常见的用法，可以根据页面上元素的位置和需要进行针对性的样式设置。合理运用这些选择器，能够更好地优化页面效果，增强用户体验。