CSS-子元素过滤选择器：first-child 与 :nth-child(n) 的特殊之处

语义：

1、：first-child 指的是选取父元素的第一个子元素

2、:nth-child(n) 指的是选取父元素下的第 n 个子元素，n 从1开始

来看一个实例，页面展示的样式如下：

 DOM结构如下：

<div class="selector">
      <img src="../../../assets/images/monitors/echart_jin.png"/>
      <div>11111</div>
      <div>22222</div>
      <span>4444</span>
      <span>5555</span>
</div>

• 需求1：把【11111】字体颜色变为红色，我觉得应该是这样写

.selector{
    margin-left 50px

    >div:first-child(1){
      color red
    }
   
  }

结果没有发生任何的改变，这是因为：

1、 div:first-child(1) 指的并不是父元素下【第一个】【div节点】；

2、:first-child(1) 指的是第一个子元素节点，如果要加前缀，则前缀一定要和标签一致，如 上面把 img  写成  div 就不起作用；

3、正确的写法应该是这样

>:nth-child(2){
      color red
}

或者

>div:nth-child(2){
      color red
}

4、实际在开发过程中如果用到子元素过滤器，可以忽略前缀，直接用 :nth-child(n)  索引代替即可