CSS控制样式的三种方式(优先级对比验证)

2020-05-08 08:38:25易采站长站整理

<style type=”text/css” media=”screen”>
div {
color: red;
}
div {
color: blue;
}
</style>
</head>
<body>
<div>红色样式先,蓝色样式后</div>
</body>
</html>

显示效果:

从两个结果我们可以知道,当只有标签选择器的时候,后面定义的样式表的优先级就越高。

四、总结

1.当只使用id选择器、class选择器或者标签选择器的时候,不管是使用多少种样式表定义方式,都是内嵌样式的优先级最高,接下来外部样式表和内部样式表的就得看他们的引入顺序了;
2.当只使用id选择器或者class选择器的时候,同一个标签内不管使用了多少个,都是排在前面的优先级更高;
3.当只使用标签选择器的时候,如果定义了多个一样的,你们写在最后面的标签选择器生效,也就是它的优先级最高;
4.当同一个标签中既有id选择器,又有class选择器,同时又有标签选择器的时候,优先级的次序是id选择器 > class选择器 > 标签选择器;
5.当每一种都有的时候,那就根据具体情况具体分析吧,嘿嘿,哈哈……

恩,这篇文章我很用心写的哦,如果大家觉得好,麻烦点击一下赞吧,又或者你有什么疑问或者不一样的意见,欢迎留言讨论哦,因为白天要上班,所以我会在晚上有空的时候及时处理的,还请见谅哈。

转载请注明出处:http://www.cnblogs.com/xiaoxuetu/