什么是提高CSS特性最性格有效的方法？ [英] What is the most character-efficient way to increase CSS specificity?

问题描述

如果我想增加规则的CSS特性，我倾向于前缀 html ，但我想知道是否有更简洁的方法这样做？ p>

（这可能是一个小问题，但在我的样式表定义一个响应式网格的过程中，减少特定前缀一个字符会节省几百个字节） / p>

解决方案

这真的取决于你想要达到的目标。增加特异性的便宜方式是简单地重复选择器。例如，如果这是您的标记：

 < figure id =myIdclass = myClass>< / figure> 
  

这是你的CSS：

 ＃myId.myClass {color：red; font-weight：bold; } / *特异性：110 * / 
  

您可以简单地重复 / code>或 id 选择器而不修改您的标记：

 ＃myId.myClass.myClass {color：green; } / * Specificity：120 * / 
＃myId＃myId {font-weight：normal; } / *特异性：200 * / 
  

这是完全有效的，因为W3C选择器第3级建议在计算特异性部分中：

注意：允许重复发生同一个简单选择器，并且增加特异性。

If I want to increase the CSS specificity of a rule, I tend to prefix with html, but I wonder if there are more concise ways of doing this?

(It may seem like a trivial issue, but over the course of my stylesheets defining a responsive grid, decreasing the specificity prefix by a single character would save a few hundred bytes)

解决方案

This really depends on what you're trying to achieve. A cheap way of increasing specificity is to simply repeat a selector. For instance, if this was your markup:

<figure id="myId" class="myClass"></figure>

And this was your CSS:

#myId.myClass { color:red; font-weight:bold; }      /* Specificity: 110 */

You could simply repeat the class or id selector without modifying your markup at all:

#myId.myClass.myClass { color:green; }              /* Specificity: 120 */
#myId#myId { font-weight:normal; }                  /* Specificity: 200 */

JSFiddle demo.

This is completely valid, as the W3C Selectors Level 3 Recommendation states in its Calculating Specificity section:

Note: Repeated occurrances of the same simple selector are allowed and do increase specificity.

这篇关于什么是提高CSS特性最性格有效的方法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！