CSS一个类使用多个类别样式 ,到底以哪个为准?【!important权重最高】有代码

从CSS代码存放位置看权重优先级:内嵌样式 > 内部样式表 > 外联样式表。其实这个基本可以忽视之,大部分情况下CSS代码都是使用外联样式表。

从样式选择器看权重优先级:important > 内嵌样式 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符

important的权重为1,0,0,0

ID的权重为0,1,0,0

类的权重为0,0,1,0

标签的权重为0,0,0,1

伪类的权重为0,0,1,0

属性的权重为0,0,1,0

伪对象的权重为0,0,0,1

通配符的权重为0,0,0,0

实例:

  1. <html>
  2. <head>
  3. <style type=“text/css”>
  4. #left{color:black!important;}         /*1,1,0,0*/
  5. #container #left{color:red;}         /*0,2,0,0*/
  6. #left{color:green!important;}       /*1,1,0,0*/
  7. .container #left{color:blue;}      /*0,1,1,0*/
  8. </style>
  9. </head>
  10. <body>
  11. <div class=“container” id=“container”>
  12.    <span id=“left”>这到底是什么颜色啊?</span>
  13. </div>
  14. </body>
  15. </html>

2个#left的权重都是1,1,0,0 这个时候就采用最后定义原则,所以最后输出的姿态是绿色的。

「点点赞赏,手留余香」

    还没有人赞赏,快来当第一个赞赏的人吧!
0 条回复 A 作者 M 管理员
    所有的伟大,都源于一个勇敢的开始!
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论