div 项包装器中的 CSS3 选择器最后类型

Question

我一直在尝试选择最后一个“单元格伙伴”，也是最后一个单元格。 last-of-type 似乎对我不起作用，如果我使用 first-of-type 然后它选择 cw_partner 的第一项，我不知道为什么 last-of-type 在我的示例代码中不起作用:

HTML :

<div id="listWrapper">
    <div class="cell_wrapper cw_partner">
        <div class="cell partner">
            <div class="listing_picture">
            </div>

            <div class="listing_title">
                TITLE
            </div>

            <div class="listing_description">
                <div class="desc_addr">
                     This cell should NOT BE SELECTED!<br>
                     <br>
                </div>
                <div class="desc_info">
                     <br>
                </div>
            </div>
        </div>
    </div>

    <div class="cell_wrapper cw_partner">
        <div class="cell partner">
            <div class="listing_picture">
            </div>

            <div class="listing_title">
                TITLE
            </div>

            <div class="listing_description">
                <div class="desc_addr">
                     This cell should NOT BE SELECTED!<br>
                     <br>
                </div>
                <div class="desc_info">
                     <br>
                </div>
            </div>
        </div>
    </div>

    <div class="cell_wrapper cw_partner">
        <div class="cell partner">
            <div class="listing_picture">
            </div>

            <div class="listing_title">
                TITLE
            </div>

            <div class="listing_description">
                <div class="desc_addr">
                     This cell partner should be selected<br>
                     <br>
                </div>
                <div class="desc_info">
                    <br>
                </div>
            </div>
        </div>
    </div>


    <div class="cell_wrapper noPartner">
        <div class="cell noPartner">
            <div class="listing_picture" style="">
            </div>

            <div class="listing_title">
                TITLE
            </div>

            <div class="listing_description">
                <div class="desc_addr">
                     <br>
                     <br>
                </div>
                <div class="desc_info">
                    <br>
                </div>
            </div>
        </div>
    </div>

    <div class="cell_wrapper noPartner">
        <div class="cell noPartner">
            <div class="listing_picture" style="">
            </div>

            <div class="listing_title">
                TITLE
            </div>

            <div class="listing_description">
                <div class="desc_addr">
                     <br>
                     <br>
                </div>
                <div class="desc_info">
                    <br>
                </div>
            </div>
        </div>
    </div>


    <div class="cell_wrapper noPartner">
        <div class="cell noPartner">
            <div class="listing_picture" style="">
            </div>

            <div class="listing_title">
                TITLE
            </div>

            <div class="listing_description">
                <div class="desc_addr">
                     This cell noPartner should be selected<br>
                     <br>
                </div>
                <div class="desc_info">
                    <br>
                </div>
            </div>
        </div>
    </div>

</div>

CSS:

#listWrapper {
        width: 300px;
        height: 600px;
        overflow: auto;
    }

    .cell_wrapper {
        background: #9f9fff;
        height: 70px;
        width: 280px;
    }

    .cell {
        background: #fe9;
        margin: 10px;
        width: 250px;
        height: 50px;
    }

    #listWrapper .cw_partner:last-of-type .cell:last-of-type,
    .cell_wrapper:last-child .cell:last-of-type {
        background: red;
    }

我在 JSFiddle 上也有这个: http://jsfiddle.net/SxB3M/4/

Answer 1

last-of-type 仅适用于类型(标签名称)——例如获取容器内的最后一个 div。我认为您尝试做的事情只能使用 Javascript 来完成。

更新: 添加一个简单的 jQuery 解决方案:http://jsfiddle.net/ESUGN/1/

$('.cw_partner').last().find('.cell').last().css('background','red');