:nth-child深度解析以及如何实现css奇偶选择器

    我是表示很难理解。

    应该理解为，p元素的父元素下面的第二个p元素。

    no，不对！看下面的例子吧。

<style>
    p:nth-child(2){
        background: blue;
    }
</style>

<div class="parent">
    <p>第1行P元素</p>
    <p>第2行P元素</p>
    <p>第3行P元素</p>
    <p>第4行P元素</p>
    <p>第5行P元素</p>
    <p>第6行P元素</p>
    <p>第7行P元素</p>
</div>

    效果如下图

貌似上面那个观点是正确的。看下面的代码，把p元素前面加一个span标签。

<div class="parent">
    <span>我只是一个span元素</span>
    <p>第1行P元素</p>
    <p>第2行P元素</p>
    <p>第3行P元素</p>
    <p>第4行P元素</p>
    <p>第5行P元素</p>
    <p>第6行P元素</p>
    <p>第7行P元素</p>
</div>

效果如下图

显然和我们想的不一样，p:child(2)的意思应该是p标签父元素的地二个孩子。

我可一欣然的告诉你这个想法也不对的。继续看下面，我把span标签放到第一个p标签后面。

<div class="parent">
    <p>第1行P元素</p>
    <span>我只是一个span元素</span>
    <p>第2行P元素</p>
    <p>第3行P元素</p>
    <p>第4行P元素</p>
    <p>第5行P元素</p>
    <p>第6行P元素</p>
    <p>第7行P元素</p>
</div>

效果出我们所料，如下图

    元素无任何颜色变化。

    我推测，p:nth-child(2)的意思应该是，选择p标签父元素下面第二个元素并且这个元素为p元素。

    大胆尝试，把样式选择器修改一下，变为nth-child（3）

p:nth-child(3){
    background: blue;
}

    效果如下图

看来结论正确：

    p:nth-child(2)的意思应该是，选择p标签父元素下面第二个元素并且这个元素为p元素。

    我们修改上面的style

p:nth-child(odd){
    background: blue;
}
p:nth-child(even){
    background: yellow;
}

    效果如下图

    从图中也可看出span元素并没有被选择，但是它依旧在队列的顺序当中，只是并没有被选择。

上面这个公式可以做出某些不规则的选择

咱们继续修改style

p:nth-child(3n+0){
background:#ff0000;
}

效果如下图

你可以随意修改a，n, b进行尝试。