HTML CSS3 伪类：not:first-child 和 :last-child

在本文中，我们将介绍HTML和CSS3中的伪类:not:first-child和:last-child的使用方法和示例。

阅读更多：HTML 教程

什么是伪类？

在CSS中，伪类是用于选择HTML元素的特殊关键字，可以为元素添加特定的样式。伪类以冒号（:）开头，并且可以与普通的选择器组合使用。常见的伪类包括:hover、:active、:focus等。

:not:first-child伪类

:not:first-child伪类用于选择除了第一个子元素之外的所有其他子元素。它的语法为:not(:first-child)。

例如，假设我们有一个无序列表（ul）包含了许多列表项（li），我们希望给除了第一个列表项之外的其他列表项添加特定样式，可以使用:not:first-child伪类来实现：

<style>
  ul li:not(:first-child) {
    color: red;
  }
</style>

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

在上面的示例中，除了第一个列表项之外的其他列表项都将变为红色。

:last-child伪类

:last-child伪类用于选择最后一个子元素。它的语法为:last-child。

同样以无序列表为例，我们可以使用:last-child伪类选择最后一个列表项，并为其添加特定样式：

<style>
  ul li:last-child {
    font-weight: bold;
  }
</style>

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

在上面的示例中，最后一个列表项将以加粗字体显示。

结合:not:first-child和:last-child的使用

我们还可以使用:not:first-child和:last-child伪类的组合，对除了第一个和最后一个子元素之外的其他子元素进行选择和样式设置。

<style>
  ul li:not(:first-child):not(:last-child) {
    background-color: yellow;
  }
</style>

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

在上面的示例中，除了第一个和最后一个列表项之外的其他列表项都将有黄色背景。

容易混淆的使用情况

需要注意的是，:not和:first-child、:last-child等伪类的顺序和组合会导致不同的结果。

例如，假设我们有以下结构的列表：

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

如果我们使用以下样式：

<style>
  ul li:not(:first-child) {
    color: red;
  }
  ul li:last-child {
    font-weight: bold;
  }
</style>

那么除了第一个列表项之外的其他列表项会变为红色，但最后一个列表项不会加粗。这是因为:last-child伪类会将最后一个列表项重新设置为默认样式，覆盖了:not(:first-child)设置的样式。

解决这个问题的一种方法是调整伪类的顺序，将:last-child放在:not(:first-child)之前：

<style>
  ul li:last-child {
    font-weight: bold;
  }
  ul li:not(:first-child) {
    color: red;
  }
</style>

这样就能正确地将除了第一个列表项之外的其他列表项设置为红色，并将最后一个列表项加粗。

总结

在本文中，我们介绍了HTML和CSS3中的:not:first-child和:last-child伪类的使用方法和示例。通过使用这些伪类，我们可以对特定的子元素进行选择和样式设置，使得网页的设计更加灵活和多样化。在使用这些伪类时，需要注意它们的顺序和组合，以确保获得期望的效果。希望本文对你理解和使用这些伪类有所帮助。