如果我想增加规则的 CSS 特异性,我倾向于使用 html
作为前缀,但我想知道是否有更简洁的方法来做到这一点?
(这似乎是一个微不足道的问题,但在我定义响应式网格的样式表的过程中,通过单个字符减少特异性前缀将节省几百个字节)
最佳答案
这实际上取决于您要实现的目标。一种增加特异性的廉价方法是简单地重复一个选择器。例如,如果这是您的标记:
<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 */
这是完全有效的,正如 W3C Selectors Level 3 Recommendation 在其 Calculating Specificity section 中所述:
Note: Repeated occurrances of the same simple selector are allowed and do increase specificity.
关于html - 提高 CSS 特异性的最有效字符方式是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19399625/