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

CSS选择器优先级总结

时间:2019-01-19 15:18:09      阅读:169      评论:0      收藏:0      [点我收藏+]

标签:机制   pre   div   这一   顺序   art   nbsp   显示   选择   

一、问题引出

  一段代码

<h1 class = "blue" id = "title">article</h1>

  在CSS中使用不同的选择器对文字的颜色进行设置。

h1{
    color:red;
}
.blue{
    color:blue;
}
#title{
    color:yellow;
}

  最终的字体颜色是黄色,当然也可以尝试把3种设置顺序颠倒查看效果。

二、问题答案

  元素采用了某种排序机制,在这一机制种,id选择器优于类选择器,而类选择器又优于标签选择器,因此最后字体显示为黄色。这一类机制就称为优先级机制。

三、总结

  常见选择器的优先级排序(低到高)

  1.通用选择器。如*{...}

  2.标签选择器。如h1{...}

  3.类选择器。如.blue{...}

  4.伪类选择器。如a:hover{...}、li:first-child{...}

  5.ID选择器。如#title{...}

 

CSS选择器优先级总结

标签:机制   pre   div   这一   顺序   art   nbsp   显示   选择   

原文地址:https://www.cnblogs.com/dybala21/p/10291626.html

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