css继承性
继承性就是当给自己设置属性的时候,自己的后代都继承上了。
哪些属性能继承?关于文字样式的,都能够继承,如:color、 text-开头的、line-开头的、font-开头的。所有关于盒子的、定位的、布局的属性都不能继承。
【案例】
CSS
div{
color:green;
text-align: center;
line-height: 35px;
font-size: 14px;
}
HTML
标题
段落
li
li
分析:当给div设置样式时,h1标签、p标签、li标签都继承了div的样式。
【浏览器显示效果】
css层叠性-权重计算
css层叠性就是css处理冲突的能力,也就是css权重问题。
【权重计算方法一】
先看有没有选中,如果选中了,那么以id数,类数,标签数来计权重。谁大听谁的。如:
CSS
#box1 div{/*1个id,1个标签*/
color: red;
}
#box3{/*1个id*/
color: blue;
}
HTML
文字
分析:#box1div{…}和#box3{…}都选中了最内层div,#box1div{…}包含了1个id,1个标签;#box3{…}包含了1个id;因此#box1 div{…}的权重比#box3{…}的要大,以#box1 div{…}的样式为准。
【浏览器显示效果】
文字
【权重计算方法二】
先看有没有选中,如果选中了,那么以id数,类数,标签数来计权重。如果都一样,以后写的为准。如:
CSS
#box2 div .paragraph{/*1个id,1个标签,1个类*/
color: blue;
}
#box1 .box2 p{/*1个id,1个标签,1个类*/
color: red;
}
HTML
段落
分析:#box2 div .paragraph{...}和#box1 .box2 p{...}都选中了段落p。都包含1个id,1个类,1个标签,因此权重一样。权重一样,以后写的为准。
【浏览器显示效果】
段落
【权重计算方法三】
如果没有选中,那么权重是0。如果大家都是0,就近原则。如果描述的一样近,比选择器权重,如果权重再一样,以后写的为准。如:
CSS
#box3{
color: blue;
}
#box1 #box2{
color: red;
}
HTML
段落
分析:#box3{…}没有选中段落p,权重为0;#box1 #box2{…}没有选中段落p,权重为0。#box3{…}描述到了倒数第二层,#box1 #box2{…}描述到了倒数第三层。因此#box3{…}离的近,权重大。
【浏览器显示效果】
段落
打赏规则
为了避免对于打赏模式产生误解,说明一下几点内容:
1.打赏纯粹自愿,金额不限;
2.打赏不能作为解答前端技术疑问的理由;
3.打赏不能作为催促更新文章的理由;
4.打赏不能帮你做毕业设计或论文;
5.打赏不能帮你做工作中的项目;
6.总之:打赏就是这不能那不能,只是单纯打赏而已。
声明
* 公众号(QD前端基地)内转载文章全部用于学习交流,如有涉及版权问题请与我联系,我会删除相关文章。给您带来不便敬请谅解,谢谢!
* 公众号(QD前端基地)内原创文章如内容不符合事实或涉及其他方面的问题,请及时通知本人进行修改或删除。版权作品未经授权严禁盗图转载,如有雷同纯属巧合。
* 转载公众号(QD前端基地)内的文章,请先与本文作者联系经过同意后方可转载,并注明相关出处和作者信息且留下原文链接地址,这是对文章作者的尊重,也是对知识的尊重。欢迎同行网站转载本站文章。
【投诉请联系微信】:xinxiha888
前端基地
「前端基地」最专业的Web前端开发在线学习公众号,提供Web前端开发教程,是分享Web前端开发技术和前端资源的在线学习交流公众号。
关注一下,也许你就成为牛逼的前端高手呢~
微信公众号:qdbase
领取专属 10元无门槛券
私享最新 技术干货