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

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

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

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

(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时,

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

内容查看价格2立即支付

VIP开通扫码赞助100元开通月会员,366季会员,520年会员,1000终身会员, 好博客现已开通支付宝支付在线支付功能大家可以直接充值购买会员。
站长技术支持QQ:2690502116(加站长QQ注明来源:好博客+会员账号)
点赞

发表评论