优先于 id 和 class 的 id 选择器

Question

我有一种情况，我使用选择器加载样式，该选择器应该优先于另一个。 这种情况类似于this fiddle 中的情况，其中特定的 id 选择器没有优先于另一个使用特定 id 下的类的选择器。

--HTML
<div id="cont">
<p class="hello" id="hello">I wish I was blue</p>
</div>

--CSS
#hello {
    color:blue;
}
#cont .hello {
    color:red;
}

Result is red text

我很确定这可以在不使用 !important 的情况下实现 - 我真的想避免这种情况，因为这将由没有用于 A/B 测试的 css 技能的设计师维护。我想为他们制作一个选择器，他们只会编辑它的属性。

编辑：需要明确的是，#hello 选择器被注入到页面中，我想将其更改为实际可用的选择器，但我不想为此更改另一个选择器。当然，如果我别无选择，我会这样做，但似乎合理的是，这个 css 是有效的，并且应该可以在不修改它的情况下覆盖该选择器。

Answer 1

只需使用:not 选择器即可排除#hello 元素。

将第一个改为：

#cont .hello:not(#hello) {
    color:red;
}

Demo Fiddle

More on :not from MDN

否定的 CSS 伪类 :not(X) 是一个函数符号 将一个简单的选择器 X 作为参数。它匹配一个元素 不是由参数表示的。 X 不能包含另一个 否定选择器，或任何伪元素。

---

或者-根据下面的 cmets，您可以增加第二个选择器的特异性，同时为各种上下文提供变体：

#hello, #cont #hello, #hello.hello {
    color:blue;
}

Demo Fiddle

Answer 2

我建议您在第一组 CSS 规则中添加另一个 id 选择器。

 #cont #hello {
    color:blue;
   }

 #cont .hello {
    color:red;
   }

演示 http://jsfiddle.net/a_incarnati/53q74jah/

在这种情况下，颜色被覆盖为红色，因为您只使用了一个 id 选择器#hello，并且它不像您所做的那样具有 2 个 id 组合或一个 id 和一个类组合的选择器那么具体：

#cont .hello {
    color:blue;
}

编写 CSS 代码时要考虑的一件事是 CSS 特异性的概念。很好地理解这个概念将避免你不得不使用 !important;

正如 Mozilla 开发者网络所定义的那样，特殊性仍然存在：

特异性是浏览器决定哪个属性的方式 值与元素最相关并且可以应用。 特异性仅基于由以下组成的匹配规则 不同种类的选择器。

以下选择器列表是通过增加特异性：

• 通用选择器
• 类型选择器
• 类选择器
• 属性选择器
• 伪类
• ID 选择器
• 内联样式

您可以通过计算 CSS 语句中存在多少个选择器来衡量特异性。

CSS Specificity 可以用 4 列优先级表示：

内联=1|0|0|0

id=0|1|0|0

class=0|0|1|0

元素=0|0|0|1

从左到右，最大的优先。

Answer 3

您不需要两个不同的选择器。你可以保留一个：

.hello {
    color:red;
}
#cont .hello {
    color:blue;
}

http://jsfiddle.net/vkftfj2n/4/