html - 动态隐藏/覆盖 CSS 类

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属性，如果有必要的话，但另一个跨度标签是由我无法强硬的框架生成的。

有没有办法仅从最后一个跨度标记中隐藏指定的 CSS 类？

_{如果覆盖最后一个 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