[分享]css不是最后一个元素

虽然CSS（层叠样式表）在网页开发中扮演着至关重要的角色，但它并不是所有元素的最后一个儿子。

.container {
  display: flex;
}

.container p:last-child {
  color: red;
} 

考虑上面的代码，它给一个类名为“container”的元素应用一个flex布局，并选择其中最后一个

元素来添加样式。这听起来很合理，但在实践中你可能会发现样式没有如预期般起作用。

问题在于：CSS的最后一个儿子并不是最后一个HTML元素。在上面的例子中，最后一个儿子是一个文本节点，而不是

元素。由于样式只应用于最后一个

元素，因此这个文本节点不会被影响到。

解决这个问题的方法并不是很复杂。在上面的例子中，你可以更改选择器以选择最后一个在“container”容器元素内的

元素。代码如下：

.container {
  display: flex;
}

.container p:last-of-type {
  color: red;
} 

这次，选择器是“:last-of-type”，它选择在“container”中所有

的最后一个元素。

总之，虽然CSS是网页开发的关键技术之一，但是它并不适用于所有问题。因此，了解HTML和CSS之间的差异非常重要，这样你就可以避免出现意外的问题。