Css 包含元素的最后一个子元素

我认为这是不可能的：-(

使用CSS，我需要选择段落列表中最后一个

标签

，它位于

span

中

<div>
    <p>
        <span>
            <label>no good, because not the last</label>
        </span>
    </p>
    <p>
        <span>
            <label>good</label> <!-- This one should be selected -->
        </span>
    </p>
    <p>
        <label>no good, because is not inside of a span</label>
    </p>
</div>

但我认为CSS还不理解括号

原因是ExtJS（Sencha）将单选按钮放在嵌套容器中。按钮的可见性在内部容器中声明（即上面示例中的

span

标记）.我想把最后一个可见标签的角弄圆，因此我需要找到最后一个外部容器，它有一个内部容器来声明它的可见性

也许有一种不同的解决方法？作为最后的手段，我会接受JS解决方案，只要它基于遍历语法的本机ExtJS组件/元素，而不是jQuery

如果需要，请询问更多详细信息。

这将（可能，取决于选择器是否在最终规范中）在一定程度上可以通过以下方式实现：

但这将选择所有内部有

的
，而不仅仅是最后一个。CSS目前不知道
：最后一个
选择器，据我所知，即使使用CSS 4，这也不会实现1

所以总结是：目前在纯CSS中无法做到这一点


目前，您唯一的选择是使用JavaScript。jQuery中的一个示例是：

$('p:has(span)').last().css({ 'background': 'red' });


或者，正如您在评论中提到的，使用extjs：

Ext.select('p:has(span):last').setStyle('background', 'red');



回答您的最新问题
您的新示例不再需要父选择器。部分工作的CSS将是

div > p > span > label {
    background: red;
}

但是仍然：CSS中没有
：last
选择器。更新上述JavaScript示例：

:

:


1关于
：最后一个
选择器：

更清楚地说：
：last child
选择dom中元素中的最后一个子元素，不管它是什么。它不是子查询。因此，即使要实现括号版本，
：last child
也不会选择任何内容，因为真正的最后一个元素不是查询的一部分。您需要一个
：last
选择器l在某些JavaScript库中，ike选择结果集的最后一项，因此它是一个子查询。这是一个完全不同的选择器，不会很快成为CSS的一部分。
简而言之，您要选择第n个元素？它不能是第n个。它必须是最后一个可见的元素-在这种情况下，最后一个包含另一个元素。是否要选择ect this->
很好
对不起，是的。我想这很清楚。你修改的问题非常不同。不再需要
：has
。但主要问题仍然是：CSS中没有
：last
选择器。谢谢。是的，我想我可以用jQuery来做。但我现在是ExtJS。从未听说过CSS4-这是令人兴奋的ng！@Geo您需要使用此解决方案，目前还没有解决此问题的方法：）该网站已严重过时。主题选择器不再使用该语法，事实上，一旦选择器4实现，它甚至可能在CSS中不可用。请参见@BoltClock下的我的评论，谢谢！更新了我的答案。也许您知道
：nth-last-match（）
选择器是否会以这种方式工作。不，
：nth-last-match（）
也基于同级进行操作，并且在CSS中也不允许使用组合符。简而言之，这在CSS中仍然是不可行的，不幸的是。。。
Ext.select('p:has(span):last').setStyle('background', 'red');

div > p > span > label {
    background: red;
}

$('div > p > span > label').last().css({ 'background': 'red' });

Ext.select('div > p > span > label:last').setStyle('background', 'red');