0

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

使用 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上面示例中的标签）。我想圆角最后一个可见标签，因此我需要找到最后一个外部容器，它有一个内部容器声明它的可见性。

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

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

4

1 回答 1

1

这将（也许，取决于选择器是否在最终规范中）在CSS 4中部分可能：

!p > span {
    background: red;
}

但这将选择所有<p/>有<span/>内部的，而不仅仅是最后一个。CSS 目前不知道:last选择器，据我所知，即使使用 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 1中没有:last选择器。更新上述 JavaScript 示例：

jQuery :

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

extJS：

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

1 关于:last选择器：

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

于 2013-05-22T18:03:40.723 回答