-5

我有一些示例帖子标记：

<article class="post">
    <p>Some text.</p>
    <p>
        <a href="#"><img src="#"></a>
        <a href="#"><img src="#"></a>
        <a href="#"><img src="#"></a> <!-- TARGET ME (LAST) -->
    </p>
    <p>Some text. Some more text <a href="#">with link</a></p>
    <p>
        <a href="#"><img src="#"></a> <!-- TARGET ME (LAST) -->
    </p>
    <p>Some text. Some more text <a href="#">with link</a></p>
</article>

上面的小提琴可以在这里看到：http: //jsfiddle.net/alecrust/4TCyM/

问题：如何在不更改此标记的情况下定位每组中的最后一个图像（显示为 HTML 注释）？

我认为 JavaScript 将是必需的，因为我想不出任何 CSS 解决方案。我不能使用img:last-child，因为它针对上述标记中的每个图像。我不能使用a:last-child img，因为这不会针对上述标记中的任何内容。

4

5 回答 5

1

这将使用 jQuery 的find()来完成：

​$(".post p").find("img:last")​​

或者，如果您必须检查它们是否在a标签内，您可以执行以下操作：

$(".post p").find("a img:last")

此外，在仔细检查之后，您的原始作品也可以：

$("a:last-child img");

演示

于 2012-10-03T22:23:56.267 回答
0

$('a:last-child').children('img')应该做的伎俩。找到每组中的最后一个锚点，然后使用 、 或 钻取>img.children()标签.find()。

于 2012-10-03T22:22:47.743 回答
0 
$( "article.post p a:last-child img" )

http://jsfiddle.net/kboucher/fUfmY/

于 2012-10-03T22:25:14.693 回答
0

使用:last-of-type！

p img:last-of-type { ... }

或:last-child在锚点而不是图像上使用：

p a:last-child img { ... }

不需要 JS ;)

于 2012-10-03T22:23:21.863 回答
0 
​$​("a:last-child").has("img").css("background", "red");​​​​​​​​​​​​​​

http://jsfiddle.net/4TCyM/1/

于 2012-10-03T22:23:35.570 回答