一、问题引出
一段代码
<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选择器优先级总结
原文地址：https://www.cnblogs.com/dybala21/p/10291626.html