通过id和类对id选择器进行优先级排序 [英] Prioritize id selector over an id and class

问题描述

我有一种情况，我加载一个选择器的样式应该优先于另一个。
这种情况​​类似于这个小提示中的情况，其中特定的id选择器不是优先于使用特定id下的类的另一个类。

   -  HTML 
< div id =cont> 
< p class =helloid =hello>我希望我是蓝色的< / p> 
< / div> 
 
 --CSS 
 #hello {
 color：blue; 
} 
 #cont .hello {
 color：red; 
} 
 
结果是红色文字
  

肯定这是可能的，而不使用！重要 - 我真的想避免，因为这将由设计师保持没有css技能的A / B测试。我想为他们做一个选择器，他们只会编辑它的属性。

编辑：为了清楚， #hello selector注入到页面，我想将其更改为一个实际工作，但我不想更改其他选择器的目的。当然，如果我没有选择，我会的，但似乎是合理的是，这个CSS是有效的，因为它是，并重写选择器应该是可能的，而不修改它。

解决方案

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

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

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

在此case颜色被覆盖为红色，因为你只使用一个id选择器#hello，它不如一个选择器具有2个id组合或一个id和一个类结合，像你做：

  #cont .hello {
 color：blue; 
} 
  

编写CSS代码时需要考虑的事情之一，的CSS特异性。了解这个概念将避免你必须使用！important;

正如Mozilla开发者网络所定义的，特异性仍然是：

浏览器决定哪些属性
的值与一个元素最相关，并得到应用的手段。
特异性仅基于由不同种类的
选择器组成的匹配规则。

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

• 通用选择器


• 键入选择器


• 类别选择器


• 属性选择器


• 伪类


• 
  
• 内联样式

您可以测量CSS语句中有多少个选择器。 / p>

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

inline = 1 | 0 | 0 | 0

id = 0 | 1 | 0 | 0

class = 0 | 0 | 1 | 0

element = 0 | 0 | 0 | 1

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

I have a situation in which I load a style with a selector that should be prioritized over another. The situation looks like the one in this fiddle, in which a specific id selector is not being prioritized over another one that uses a class that is under a specific 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

I'm pretty sure this could be possible without using !important - which I really would like to avoid since this will be maintained by designers with no css skills for A/B testing. I want to make a selector for them that they will only edit it's properties.

Edit: To be clear, the #hello selector is injected to the page and I want to change it to one that actually works, but I don't want to change the other selector for that purpose. Of course if I have no choice I will, but it seems reasonable to be that this css is valid as it is and overriding that selector should be possible without modifying it.

解决方案

I suggest you to add another id selector to the first set of CSS rules.

 #cont #hello {
    color:blue;
   }

 #cont .hello {
    color:red;
   }

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

In this case the color was overridden in red because you were using just one id selector #hello and that it's less specific than a selector with 2 ids combined or one id and one class combined, like you have done:

#cont .hello {
    color:blue;
}

One of the things to take into account when writing CSS code, it’s the concept of CSS specificity. Understanding well this concept will avoid you to have to use !important;

As Mozilla Developer Network defines it, specificity is nonetheless:

Specificity is the means by which a browser decides which property values are the most relevant to an element and gets to be applied. Specificity is only based on the matching rules which are composed of selectors of different sorts.

The following list of selectors is by increasing specificity:

• Universal selectors
• Type selectors
• Class selectors
• Attributes selectors
• Pseudo-classes
• ID selectors
• Inline style

You can measure specificity counting how many selectors are present in a CSS statement.

CSS Specificity can be represented by 4 columns of priority:

inline=1|0|0|0

id=0|1|0|0

class=0|0|1|0

element=0|0|0|1

Left to right, the highest number takes priority.

这篇关于通过id和类对id选择器进行优先级排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！