CSS3的first-child和last-child选择器用法总结（很容易犯才错误，有几个坑！）

first-child官方解释：表示在一组兄弟元素中的第一个元素（最初定义时，所选元素必须有一个parent。而从选择器 Level 4 开始，parent不再是必须的。）

last-child官方解释：表示在一组兄弟元素中的最后一个元素（最初定义时，所选元素必须有一个parent。而从选择器 Level 4 开始，parent不再是必须的。）

 

务必注意：你的这组兄弟元素节点必须在同一个父元素节点的第一个位置(first-child)或最后一个位置(last-child)

 

（一个很大的坑！）使用伪类或伪元素很容易犯的一个错误（尤其在使用scss编写代码时）

// 这种写法是标准情况：作用在同一个父节点下的所有p标签
p:first-child {
    font-size: 30px;
    color: #00FF00;
}

// 这种写法是最容易犯的一个错误：是作用在所有p节点的后代节点下面的第一个子节点元素
// 这种写法等价于css的【p :first-child{}】 p后面是一个空格,也就是p的后代元素的:first-child
p {
  :first-child {
    font-size: 30px;
    color: #00FF00;
  }

}