了解最后一个孩子

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>

我试图通过使用最后一个子项来选择最后一个 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。