css伪类 :first-child :nth-child() 详解

一个 CSS  伪类（pseudo-class） 是一个以冒号(:)做为前缀，被添加到一个选择器末尾的关键字，当你但愿样式在特定状态下才被呈现到指定的元素时，你能够往元素的选择器后面加上对应的伪类（pseudo-class）。你可能但愿某个元素在处于某种状态下呈现另外一种样式，例如当鼠标悬停在元素上面时，或者当一个复选框被禁用或被勾选时，又或者当一个元素是它在 DOM 树中父元素的第一个子元素时。

举个例子，看下面这段代码

<div class="wrapper">
        <ul class="item">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        <div class="item1">
            <h1>5</h1>
            <span>6</span>
            <span>7</span>
        </div>
    </div>

.item:first-child{
   background-color: red;
}

因此1️⃣.item : first-child的意思就是class为item而且是第一个子元素的这个元素（处因而第一个子元素这个状态下），设置背景颜色为红色。

根据上面的例子理解了伪类的意思，那么基本上后面几个:nth-child() :first-of-type :nth-of-type() 就差很少懂了

2️⃣:nth-child()

MDN解释：首先找到全部当前元素的兄弟元素，而后按照位置前后顺序从1开始排序，选择的结果为第（an+b）个元素的集合（n=0，1，2，3...）

<div class="wrapper">
    <ul class="item">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <div class="item">
        <h1>5</h1>
        <span>6</span>
        <span>7</span>
    </div>
</div>

.item li:nth-child(2){
    background-color: red;
}
h1:nth-child(2){
    background-color: blue;
}
h1:nth-child(1){
    background-color: green;
}

根据nth-child这个状态的意思，就是兄弟元素里面的顺序排下来的第几个

那么.item li:nth-child(2) 意思就是class 为item的元素的子元素，是li元素，而且这个li元素要是兄弟元素里面的第二个。能够得出<li>2</li>会变成红色背景。

其余几个样式结果为，h1:nth-child(2)无效果，<h1>5</h1>为绿色背景

总之，搞清楚伪类的机制，就很简单了。