动态隐藏/覆盖 CSS 类答案

【问题标题】：Hide/override CSS classes dynamically动态隐藏/覆盖 CSS 类
【发布时间】：2013-12-12 00:55:25
【问题描述】：

我有以下 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>

我只需要从last <span> 中隐藏给定的 CSS 类 - ui-sortable-column-icon。

如果我执行以下操作，

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

然后，它将从两个 span 标签中隐藏该类。

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

有没有办法隐藏指定的CSS类仅从最后一个span标签？

_{如果覆盖最后一个 span 标签中的所有类会更好。}

【问题讨论】：

您不能使用 CSS 删除类名（尽管您可以提供更具体的选择器来覆盖现有类名应用的 CSS）。你想达到什么目的？
只是为了隐藏/覆盖最后一个 <span> 的 .ui-sortable-column-icon 类。写错了，删除 CSS 类，抱歉。

标签： html css

【解决方案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

【讨论】：

抱歉，:not(:last-child) 在 Chrome 和 FireFox 上工作，但在 Internet Explorer 上不工作（我在 Internet Explorer 8 上试过）。
jQuery 只是为了让即时任务变得更容易，您可以使用纯 JavaScript 或其他 JS 库来代替。无论如何，答案很简单，您需要某种形式的 JS 来动态更改类。
@JoshC 我的意思是 JavaScript 是 OP 的唯一选择。如果 OP 想要使用该库，jQuery 是一个附加选项。
我可以知道为什么$('#form\\:dataTable\\:discountStartDate').removeClass('ui-sortable-column-icon'); 不起作用（当> span:last 被删除时）？我希望它从<span> 中删除指定的类。
@Tiny 因为它正在从父元素中删除该类：#form\\:dataTable.. 您希望将其从子元素中删除，因此需要 span。如果您试图从所有span 孩子中删除该类，只需删除:last。看到这个jsfiddle.net/JoshC/Lb6K8

【解决方案2】：

您可以使用 CSS 来选择最后一个元素，或者根据您的需要选择所有其他元素。

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

【讨论】：

抱歉，:not(:last-child) 适用于 Chrome 和 FireFox，但不适用于 Internet Explorer（我已在 Internet Explorer 8 上尝试过）。
@Tiny IE8 可能是您的要求，但就像 FYI :last-child 在 IE9+ 中工作一样。
是的，它是 CSS3，所以它不适用于 IE8。您可以使用 jQuery 删除最后一个元素，或者向 span 列表中的最后一个元素添加一个特殊的类，然后设置该类的样式。
@ElijahMurray 我不认为它是 CSS3 规范的一部分。例如，:last-child 和 :first-child 在 Selector 规范中具有相同的存在（请参阅链接），但 IE7+ 支持 :first-child。更有可能是微软不想在 IE7/8 中实现:last-child，而不是将其作为后续规范的一部分。
看第一个答案here