选择具有特定元素的最后一个孩子[重复]答案

【问题标题】：Select last child with specific element [duplicate]选择具有特定元素的最后一个孩子[重复]
【发布时间】：2015-02-07 03:33:34
【问题描述】：

是否可以使用 css 伪类来选择包含特定类元素的最后一个子元素？

这里是代码。

<ul>
    <li><span class="close">1</span></li>
    <li><span class="open">2</span></li>
    <li><span class="close">3</span></li>
    <li><span class="close">4</span></li>
    <li><span class="open">5</span></li>
    <li><span class="close">6</span></li>
    <li><span class="close">7</span></li>
</ul>

我想在数字 5 上应用特定样式，表示最后一个 li 标签包含 span 标签和 open 类。

提前感谢。

【问题讨论】：

如果没有 javascript，您将无法做到这一点。
你在用jquery吗？
是的。但如果可能的话，我会更喜欢 CSS。
我已经知道了。问题是列表内容是动态的，而不是静态的。
您可以使用:last-child css 选择器，例如ul > li:last-child 这样你就可以在 css 上应用一些东西，而不用担心 javascript

标签： html css css-selectors

【解决方案1】：

仅使用 CSS 是不可能的。你需要使用 JavaScript 来做到这一点。

示例：如果要获取具有最后一个 .close 元素的 LI，请使用：

<ul>
    <li><span class="close">1</span></li>
    <li><span class="open">2</span></li>
    <li><span class="close">3</span></li>
    <li><span class="close">4</span></li>
    <li><span class="open">5</span></li>
    <li><span class="close">6</span></li>
    <li><span class="close">7</span></li>
</ul>

<script>
var last_open_li = $('.open').last().parent();
var last_close_li = $('.close').last().parent();

last_open_li.css({background: 'green'});
last_close_li.css({background: 'red'});
</script>

http://jsfiddle.net/yw7f4cfc/1/

【讨论】：

它不会工作。我想在 5 号上应用 css，在 6 号上不应用。
@Sanky：查看我更新的答案并在其中进行调整。它适用于所选类的最后一个元素。