Question

我有以下html结构：

<div class="decorator">
    <div class="EC_MyICHP_Item">
        <div class="text">
            <h3><a target="_blank" title="" href="#"></a></h3>
            text here text here text here text here text here text here 
        </div>
    </div>

    <div class="EC_MyICHP_Item">
        <div class="text">
            <h3><a target="_blank" title="" href="#"></a></h3>
            text here text here text here text here text here text here 
        </div>
    </div>

    <div class="EC_MyICHP_Item">
        <div class="text">
            <h3><a target="_blank" title="" href="#"></a></h3>
            text here text here text here text here text here text here 
        </div>
    </div>

    <div class="readmore"><a></a></div>
</div>

我试图通过使用last-child来选择最后的EC_MyICHP_Item，但是徒劳无功。（CSS和jQuery）你能帮助我吗？

感谢。

Answer 1

您需要在选择器的末尾使用:last-child。

div.EC_MyICHP_Item:last-child

http://reference.sitepoint.com/css/pseudoclass-lastchild

示例：http://jsfiddle.net/jasongennaro/zrufd/

请注意：这在早期版本的IE中不起作用。

修改

根据有关上一个div被添加且有干扰的评论。你是对的。它确实导致:last-child窒息......至少在我测试它的Chrome中。

如果您的HTML结构保持不变，即始终为三div.EC_MyICHP_Item，则可以执行此操作

.EC_MyICHP_Item:nth-child(3)

更新了示例： http://jsfiddle.net/jasongennaro/zrufd/1/

编辑＃2

不幸的是，EC_MyICHP_Item div的数量变化

在这种情况下，我会使用jQuery：

$('.EC_MyICHP_Item:last')

进一步更新的示例： http://jsfiddle.net/zrufd/2/

Answer 2

.EC_MyICHP_Item:last-child应该效果很好。

重要的是要认识到E:last-child表示“E元素，这是最后一个孩子”，而不是“E元素的最后一个孩子”。

Answer 3

我添加了ID仅用于测试目的。

但请使用:last。

http://jsfiddle.net/aDbcW/1/

Answer 4

.EC_MyICHP_Item:last-child只有在div是其父div的最后一个子节点时才有效。由于您有div.readmore作为父项的最后一个子项，因此您的选择器将无效。您需要改为使用.EC_MyICHP_Item:last-of-type。

编辑：在jQuery中，这将转换为.EC_MyICHP_Item:last。

了解最后的孩子

4 个答案: