Question

我有以下HTML。

<th id="form:dataTable:discountStartDate">
    <span class="ui-sortable-column-icon ui-icon ui-icon-carat-2-n-s"></span>
    <span class="ui-sortable-column-icon ui-icon ui-icon-carat-2-n-s"></span>
</th>

我需要隐藏给定的CSS类 - ui-sortable-column-icon仅来自最后 <span>。

如果我执行以下操作，

<style type="text/css">
    #form\:dataTable\:discountStartDate .ui-sortable-column-icon{
        display : none;
    }
</style>

然后，它将从span标记中隐藏该类。

第一个span标记由我编写。因此，它可以被操纵。如果需要，可以给它一个id属性，但另一个span标签是由一个我不能强硬的框架生成的。

有没有办法将CSS类隐藏在指定的仅限于最后一个span标记？

_{如果覆盖最后一个span标记的所有类，那就更好了。}

Answer 1

如果你想从最后一个span元素动态删除类，这里有一些jQuery：

$('#form\\:dataTable\\:discountStartDate > span:last').removeClass('ui-sortable-column-icon');

jsFiddle example

如果要从所有span元素中删除该类：

$('#form\\:dataTable\\:discountStartDate > span').removeClass('ui-sortable-column-icon');

jsFiddle example

根据您的更新，您似乎想要这样的东西。

#form\:dataTable\:discountStartDate span.ui-sortable-column-icon:not(:last-child) {
    /* style */
}

使用:not选择器，您可以从最后span元素中排除样式。

jsFiddle example

Answer 2

您可以根据需要使用CSS选择最后一个元素或其他每个元素。

#form span:last-child {
    display: none;
}

动态隐藏/覆盖CSS类

2 个答案: