Question

我一直试图选择最后一个＆＃34;小组合作伙伴＆＃34;还有最后一个细胞。 last-of-type似乎不适合我，如果我使用first-of-type，那么它会选择cw_partner的第一项，我不知道为什么最后一个类型不是{＆1;}在我的示例代码中工作：

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');

在div项的包装中CSS3选择器last-of-type

1 个答案: