这里的最后一个孩子有效，但是第一个孩子无效，为什么？

Question

    .item:not(.active):first-child {
        color: #ddd;
    }

    .item:not(.active):last-child {
        color: #ddd;
    }

    <p class="item active">1</p>
    <p class="item active">2</p>
    <p class="item active">3</p>
    <p class="item">4</p>
    <p class="item">5</p>
    <p class="item">6</p>
    <p class="item">7</p>
    <p class="item">8</p>

这里的最后一个孩子有效，但第一个孩子无效，为什么？