2020-02-14 CSS伪类:first-child踩坑记录

  
我是标题1
  span1
  span2
  span3
  span4
  
我是标题1

div span {
  background: lightgreen;
}
div span:first-child {
  background: red;
}
div span:last-child {
  background: orange;
}

image

使用以上代码，希望对div下的第一个span和最后一个span进行更改背景色，发现无效果，

将前后的

我是标题1

去掉后才正常显示

image-20200214160258444

在W3school上的描述是

image

重点是和父元素有关系，即元素是对应的选择器且为父元素的第一个子元素，才会应用选择器对应的样式。

为了提高代码的可读性，减少伪类表意和真实作用的混淆，first-child这类伪类选择器建议只在同一特征的元素上使用。