Question

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

使用CSS，我需要选择段落列表中的最后一个label，它位于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>

实际上选择器会是这样的：

div (p > span):last-child label {
    background: red;
}

但我不认为CSS理解括号（还）。

原因是ExtJS（Sencha）将单选按钮放在嵌套容器中。按钮的可见性在内部容器中声明（在上面的示例中将是span标记）。我想要绕过最后一个VISIBLE标签的角落，因此我需要找到最后一个外部容器，它有一个内部容器来声明它的可见性。

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

如果需要，请询问更多细节。

Answer 1

CSS 4可以部分实现（可能取决于选择器是否在最终规范中）：

!p > span {
    background: red;
}

但是这将选择内部有<p/>的所有<span/>，而不仅仅是最后一个:last。 CSS目前不知道$('p:has(span)').last().css({ 'background': 'red' });选择器，据我所知，即使使用CSS 4，也不会实现¹。

所以摘要是：目前在纯CSS中无法做到这一点。

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

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

Here is a demo

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

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

Here is a demo

回答您更新的问题

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

:last

但仍然： CSS中没有$('div > p > span > label').last().css({ 'background': 'red' });选择器 ¹。更新上面的JavaScript示例：

jQuery：

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

extJS：

:last

^{1关于:last-child选择器：}

为了更清楚：:last-child选择dom中元素内的最后一个子节点，无论它是什么。它不是子查询。因此，即使您的括号版本将被实现，:last也不会选择任何内容，因为最后一个元素不是查询的一部分。你需要一个{{1}}选择器，就像在一些JavaScript库中选择结果集的最后一项一样，所以它是一个子查询。这是一个完全不同的选择器，很快就不会成为CSS的一部分。

里面元素的最后一个孩子

1 个答案:

回答您更新的问题