码迷,mamicode.com
首页 > Web开发 > 详细

[CSS3] Understand CSS Selector Specificity

时间:2018-12-11 11:23:55      阅读:235      评论:0      收藏:0      [点我收藏+]

标签:win   des   one   ann   info   why   分享图片   分享   css3   

It is hard to explain css selector specificty, to easy way to understand it is by playing around with it.

 

To remember some rules can be helpful:

  • inline style > ID selector > Classes, attributes, and pseudo-classes > Elements and pseudop elements

Which means if you have inline style in your html, even you try to use ID selector, it cannot override the inline style. That‘s why people recommend don‘t use inline style because it is hard to override.

 

  • If one combine selector A has more specificty than the other B, A will override B, even B comes later.

技术分享图片

First one is the winner. 

 

  • If A and B has the same specificity, B comes later win.
  • !Important overrides all the rest. This is the most powerful one, but again it is hard to override in the future if needed, recommended not to use it as much as possible. 

[CSS3] Understand CSS Selector Specificity

标签:win   des   one   ann   info   why   分享图片   分享   css3   

原文地址:https://www.cnblogs.com/Answer1215/p/10100201.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!