【九月打卡】第11天 CSS3的继承,优先级和重要性
2022/9/18 4:16:16
本文主要是介绍【九月打卡】第11天 CSS3的继承,优先级和重要性,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
课程名称:初识HTML(5)+CSS(3)-升级版
课程章节: CSS3的继承,优先级和重要性
主讲老师:五月的夏天
课程内容:
今天学习的内容包括: 什么是样式的继承?选择器的优先级?权值计算是什么?选择器最高层级是什么?
课程收获:
CSS
的某些样式是具有继承性的,其中继承是一种规则,它允许样式不仅应用于某个特定html
标签元素,而且应用于其后代。我们需要注意的是有一些css
样式是不具有继承性的。如border:1px solid red;
;下面代码我们设置border
,可以看到作用只是给p标签设置了边框为1像素、红色、实心边框线,而对于子元素span是没用起到作用的。
如果一个元素使用了多个选择器,则会按照选择器的优先级来给定样式。选择器的优先级依次是: 内联样式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器。
标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100。我们需要注意的是还有一个权值比较特殊–继承也有权值但很低,有的文献提出它只有0.1,所以可以理解为继承的权值最低。我们设置权值更高的CSS
样式代码来覆盖以前的CSS
样式代码。
有些特殊的情况需要为某些样式设置具有最高权值,我们就可以设置为!important
,我们需要注意的是!important
要写在分号的前面。浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式,但记住!important
优先级样式是个例外,权值高于用户自己设置的样式。
今天学习了CSS3
的继承,优先级和重要性中9-1到9-4的4个小结,花费了42分钟,我们在网站中写样式时,为了简写我们父元素和子元素的重复代码,我们可以使用css3
的继承来实现。当我们在网站中使用框架中已经存在默认样式时,此时我们想要改变默认的样式显示,可以使用优先级的效果去层叠掉默认样式,当两个优先级一样,还可以使用!important
将优先级设置最高去显示我们重新设置的效果。
这篇关于【九月打卡】第11天 CSS3的继承,优先级和重要性的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-03-06css样式背景图怎么分开(css背景图片样式)-icode9专业技术文章分享
- 2024-03-06css线性样式(css中划线样式)-icode9专业技术文章分享
- 2024-03-06jq点击添加css样式(jq设置css样式)-icode9专业技术文章分享
- 2024-03-06流程样式css(css实现流程图)-icode9专业技术文章分享
- 2024-03-06css怎么调搜索键样式(css搜索框怎么调大小)-icode9专业技术文章分享
- 2024-03-06css层叠样式(Css层叠样式介绍)-icode9专业技术文章分享
- 2024-03-06css样式表有何特点(css样式表的使用方法有几种)-icode9专业技术文章分享
- 2024-03-06css的列表样式(css列表样式属性包括)-icode9专业技术文章分享
- 2024-03-06css3手机端样式(手机端css怎么写)-icode9专业技术文章分享
- 2024-02-21蝉知CSS样式修改(改变css样式)-icode9专业技术文章分享