前端开发中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时,
您暂时无权查看此隐藏内容!
内容查看价格2元立即支付
VIP开通扫码赞助100元开通月会员,366季会员,520年会员,1000终身会员, 好博客现已开通支付宝支付在线支付功能大家可以直接充值购买会员。
站长技术支持QQ:2690502116(加站长QQ注明来源:好博客+会员账号)
本页共有 3 条评论
SEO优化技术指南推荐
-
2021年SEO的机遇有哪些?-搜索引擎公司排行榜
2021-2022年SEO行业发展前景几大趋势+SEO对行业冲击
国内搜索引擎排行榜+市场推广渠道汇总
SEO面试题-个人站长搜索引擎热门话题-seo零经验面试
2021年做SEO优化还有市场吗-搜索引擎优化现状如何
seo+竞争对手分析+策划书
SEO效果不稳定问题-如何解决排名波动大
百度SEO排名算法规则简要+SEO工作人员
SEO排名/SEM那点事儿+如何做好一个SEO技术人
在SEO行业,最乱的是什么?-SEO假象解密
网站标题做改动后多久能缓过来+提升权重分析
WordPress SEO优化技术之robots设置及固定链接优化
seo面试常见问题及答案纠正解读技巧范文+SEO推广
搜索引擎优化与伪静态页面处理技术
电商淘宝网站SEO优化推广与淘宝直通车的区别
AnWen
SEO从业者如果自己接网站优化的单子,或者SEO公司接网站优化单子,都要有一个步骤,那就是给客户报价。我相信,无论你是个人接单,还是公司接单~~
AnWen
SEO非常重要的优化方法技巧,是通过多用描述的方法来优化网站的种页面。 但是我们这里说描述,并不仅仅是指description,description只是其中之。
AnWen
随着HTML5的发展,虽然有很多人这几年都写了很多关于HTML的文章,但好像很少有提供关于HTML5能够影响有机的流量或者真的与SEO有关系的证据。而本文将主要阐述关于HTML5对于你的SEO的影响,首先我们需要知道HTML5可以提供什么及不足之处?