css课程的优先级

Question

我有两个类的跨度,像这样<span class="tag invalid_tag">abc</span>.我正确地通过jQuery添加第二个类,我需要第二个类的属性覆盖第一个,而不是实际删除它.例如,属性是字体颜色和背景颜色.通常标签是绿色的,但是当我添加类"invalid_tag"时,它应该变为红色,但它不会,因为第一个类具有优先级.我想知道如何改变这个优先级,或者我是否可以以不同的方式实现这一点.

Answer 1

CSS声明的优先级依赖于它们在CSS中的顺序(后来的声明覆盖了之前的声明)及其特殊性(更具体的声明覆盖了不太具体的声明).(它与您在属性中指定类名的顺序无关.)第6节中的更多内容是规范.

这是订单的一个例子.这个CSS

.foo {
    color: red;
}
.bar {
    color: blue;
}

用这个HTML

<p class="foo bar">Hi there</p>
<p class="bar foo">Hi again</p>

...导致两个蓝色段落,因为第二个声明优先于第一个.(实例)这是因为两个声明具有相同的特异性.

这是一个特异性的演示:

这个CSS

p.foo {
    color: red;
}
.bar {
    color: blue;
}

...使用相同的HTML会产生两个红色段落,因为选择器p.foo比选择器更具体.bar,因此它优先于CSS,尽管它在CSS中更早.(实例)