前端开发中css样式优先级问题

在对很多初学前端开发者来说前端css和html是最基本的，不论是对于html5规范新标准，还是对以往的前端知识都是应该了解的。关于css的样式层级优先级关系，你了解多少？

在对初学前端开发者来说，学会使用浏览器的开发者工具调试前端页面是必不可少的。在使用该工具调试前一定要熟知css样式优先级关系，接下来就简要介绍相关介绍。

1、css样式按引用的方式可分为内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。不同的引用方式对css优先级的影响重要作用。

（1）内联样式表（行内样式）

<div style="padding: 5px 20px; border: 1px #660033 dotted;
border-radius: 3px; text-indent: 2em;">SEO优化技术</div>

（2）嵌入样式表(内嵌式)

<style>
body{
color:#000;
background-color:#FFF;}
h1,h2,h3,h4,h5,h6{color:#333;
font-weight:400;margin:0 0 15px 0;
font-family:inherit;line-height:1.1}
h1,h2,h3{margin-top:20px;margin-bottom:10px}
h1 small,h2 small,h3 small{font-size:65%}
h4,h5,h6{margin-top:10px;margin-bottom:10px}
h4 small,h5 small,h6 small{font-size:75%}
h1{font-size:36px}
h2{font-size:30px}
h3{font-size:24px}
h4{font-size:18px}
h5{font-size:14px}
h6{font-size:12px}
</style>

（3）外部样式表（外部样式引入）

<link rel='stylesheet' id='fontawe-css' 
href='https://www.hao-blog.com/wp-content/themes/blog/static/css/iconfont.css' 
type='text/css' media='all' />

以上优先级关系是 行业样式>内部样式>外联样式，但是有!important的样式除外，对于!important属性一定要合理使用。

关于外部样式文件中导入样式文件：@import url(hao-blog.css);形式。

2、id选择器、class类选择器、属性选择器、标签选择器、伪类选择器优先级问题，具体如下。

您暂时无权查看此隐藏内容！

这里重点介绍的就是!important属性的使用，假设当id为mycolor的选择器 ，使用了!important，而当为该id选择器设置:hover时，

您暂时无权查看此隐藏内容！