CSS选择器优先级总结

Posted 2021-02-04 dybala21

一、问题引出

　　一段代码

<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{...}