CSS选择器优先级总结

一、问题引出

  一段代码

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

 

相关文章