html – 提高CSS特异性的最有效的方法是什么?

html – 提高CSS特异性的最有效的方法是什么?,第1张

概述如果我想增加规则的CSS特性,我倾向于用html作为前缀,但我想知道是否有更简洁的方法来做到这一点? (这可能看起来像一个微不足道的问题,但在我的样式表定义响应网格的过程中,通过单个字符减少特异性前缀将节省几百个字节) 这实际上取决于你想要实现的目标.提高特异性的廉价方法是简单地重复选择器.例如,如果这是你的标记: <figure id="myId" class="myClass"></figur 如果我想增加规则的CSS特性,我倾向于用HTML作为前缀,但我想知道是否有更简洁的方法来做到这一点?

(这可能看起来像一个微不足道的问题,但在我的样式表定义响应网格的过程中,通过单个字符减少特异性前缀将节省几百个字节)

解决方法@H_419_6@ 这实际上取决于你想要实现的目标.提高特异性的廉价方法是简单地重复选择器.例如,如果这是你的标记:
<figure ID="myID" ></figure>

这是你的CSS:

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

你可以简单地重复类或ID选择器而不修改你的标记:

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

JSFiddle demo.

这完全有效,正如W3C选择器3级建议书在其Calculating Specificity section中所述:

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

总结

以上是内存溢出为你收集整理的html – 提高CSS特异性的最有效的方法是什么?全部内容,希望文章能够帮你解决html – 提高CSS特异性的最有效的方法是什么?所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1106824.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-28
下一篇 2022-05-28

发表评论

登录后才能评论

评论列表(0条)

保存