html - 提高 CSS 特异性的最有效字符方式是什么？

Question

如果我想增加规则的 CSS 特异性，我倾向于使用 html 作为前缀，但我想知道是否有更简洁的方法来做到这一点？

(这似乎是一个微不足道的问题，但在我定义响应式网格的样式表的过程中，通过单个字符减少特异性前缀将节省几百个字节)

Answer 1

这实际上取决于您要实现的目标。一种增加特异性的廉价方法是简单地重复一个选择器。例如，如果这是您的标记:

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

这是你的 CSS:

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

您可以简单地重复 class 或 id 选择器而根本不修改您的标记:

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

JSFiddle demo .

这是完全有效的，正如 W3C Selectors Level 3 Recommendation 在其 Calculating Specificity section 中所述:

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