后代选择器+nth-child()选择器

后代选择器“>”+nth-child()选择器

之前一道面试题：

    .list img{
        width: 10px;
        height: 20px;
        background: blue;
    }
    .list>p:nth-child(even) img{
        background: red;
    }
    .list>p:last-child img{
        background: orange;
    }

    <div class="list">
        <p><img >p>
        <p><img >p>
        <div>
            <p><img >p>
            <p><img >p>
        div>
        <p><img >p>
        <div>
            <p><img >p>
            <p><img >p>
        div>
        <p><img >p>
    div>

试问其中的img背景颜色顺序是什么？

当时觉得很简单嘛，不就是blue、red、blue、blue、blue、blue、blue、orange嘛。但是！！！！！不好意思，真是错的！错的！错的！重要的事说三遍！

那么，现在就来看看为毛？

测试下来的颜色却是blue、red、blue、blue、red、blue、blue、orange，为什么呢？even不是偶数么？第二个red上的img数下来怎么也是5啊！！！为什么呢？？？

测试1

当把even改成1时，第一个img背景颜色会变成red

测试2

当把even改成2时，第二个img背景颜色会变成red

测试3

当把even改成3时，重点（敲黑板！）发现并没有一个img的背景会变成red，怎么回事呢？

我们可以大胆的假设，第一个div包裹的img全部作为第三个img包含块，从而时even为3时不显示。
那么再来，当第一个div内有多个

时，将even改为3，测试发现仍然不会改变，感觉这个假设可能是对的哈。
我们再将第一个div内的

全部删除，将even改为3时，测试发现背景颜色仍然不会改变！所以说刚刚的假设不对，因为不存在img了，他仍然没有改变背景颜色。

原因：

首先，我们要知道‘<’后代选择器，选择的是所有父元素的后代，那么.list>p:nth-child(even) img的意思代表：list类下的占位为偶数位的p元素下的img元素，不错，当存在不是p元素的其他元素时，它仍然会占位，不用关心其他元素内的p元素下的img元素，因为只选择后代元素！所以上面的p占位分别为：1（p）、2（p）、3（div）、4（p）、5（div）、6（p），所以显示的背景颜色为：blue、red、blue、blue、red、blue、blue、orange！