css中:last-child不生效的解决方法

CSS 中的 :last-child 伪类选择器是指选择一组元素中的最后一个子元素，可以用于设置最后一个子元素的样式。但是有时候会出现 :last-child 伪类选择器不生效的情况，接下来就来讲解一下解决方法。

解决方法

1. 确认选择器的使用位置

当我们在网页中使用 :last-child 伪类选择器时，需要注意选择器的使用位置。last-child 选择器选择的是某个父元素下的最后一个子元素，因此它只有在被选中的元素是该父元素的最后一个子元素时才生效。

例如，我们有下面的 HTML 代码：

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

如果我们想要设置最后一个 li 元素的样式，应该这样选择：

ul li:last-child {
  color: red;
}

而如果我们的 HTML 代码变成了如下形式：

<ul>
  <li>1</li>
  <li>2</li>
</ul>
<li>3</li>

那么 :last-child 伪类选择器就不会生效，因为 li 元素已经不是 ul 元素的最后一个子元素了。我们应该改为这样选择：

ul li:last-child,
ul + li:last-child {
  color: red;
}

这样既能选择最后一个 ul 元素下的 li 元素，也能选择最后一个 ul 后的 li 元素。

2. 确认选择器的使用范围

当我们在 CSS 中使用 :last-child 伪类选择器时，也需要注意选择器的使用范围。last-child 选择器选择的是某个父元素下的最后一个子元素，因此它只有在该父元素的范围内被使用时才能生效。

例如，我们有下面的 HTML 代码：

<div>
  <p>1</p>
  <p>2</p>
</div>
<p>3</p>

如果我们想要选择最后一个 p 元素并设置样式，我们应该这样选择：

div p:last-child,
p:last-child {
  color: red;
}

这样既能选择最后一个 div 元素下的 p 元素，也能选择最后一个 p 元素。

示例说明

以下是两个示例，演示如何使用上述解决方法解决 :last-child 伪类选择器不生效的问题。

示例一

HTML 代码：

<ul>
  <li>1</li>
  <li>2</li>
</ul>
<li>3</li>

CSS 代码：

ul li:last-child {
  color: red;
}

上述 CSS 代码不会生效，因为 :last-child 伪类选择器选择的是 li 元素，而不是 ul 元素。应该使用下列 CSS 代码：

ul li:last-child,
ul + li:last-child {
  color: red;
}

示例二

HTML 代码：

<div>
  <p>1</p>
  <p>2</p>
</div>
<p>3</p>

CSS 代码：

p:last-child {
  color: red;
}

上述 CSS 代码只会选择第二个 p 元素。如果我们想选择最后一个 p 元素，应该使用下列 CSS 代码：

div p:last-child,
p:last-child {
  color: red;
}

这样既能选择最后一个 div 元素下的 p 元素，也能选择最后一个 p 元素。