後代選擇器“>”+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內有多個<p><img ></p>時，將even改為3，測試發現仍然不會改變，感覺這個假設可能是對的哈。
我們再將第一個div內的<p><img ></p>全部刪除，將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！