在id和类上优先使用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伪类，不是（X），是一种功能符号   以简单的选择器X为参数。它匹配一个元素   没有参数表示。 X不得包含另一个   否定选择器，或任何伪元素。

---

或者 - 根据下面的评论，您可以提高第二选择器的特异性，同时为各种情境提供变体：

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

Demo Fiddle

Answer 2

我建议你为第一组CSS规则添加另一个id选择器。

 #cont #hello {
    color:blue;
   }

 #cont .hello {
    color:red;
   }

DEMO http://jsfiddle.net/a_incarnati/53q74jah/

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

#cont .hello {
    color:blue;
}

编写CSS代码时需要考虑的事项之一，就是CSS特异性的概念。很好地理解这个概念将避免你必须使用！important;

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

  

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

以下选择者列表是通过提高特异性来实现的：

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

您可以测量计算CSS语句中存在多少选择器的特异性。

CSS特异性可由4列优先级表示：

  

直列= 1 | 0 | 0 | 0

     

ID = 0 | 1 | 0 | 0

     

类= 0 | 0 | 1 | 0

     

元素= 0 | 0 | 0 | 1

从左到右，最高的数字优先。

Answer 3

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

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

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