本文主要讲解“css样式的继承、层叠和优先级的作用是什么”。本文的解释简单明了,易学易懂。现在,请跟随边肖的思路一起学习和学习“css样式的继承、层叠和优先级的作用是什么”!
一、css样式的继承:
功能:为父元素设置一些属性,子元素也可以使用。
应用场景:
一般用于设置网页上的一些常用信息,如文字颜色、字体、文字大小等。优化代码并减少工作量。
注意:
1.不是所有的属性都可以继承,
只能继承以颜色/字体/文本/行开头的属性;
2.在css的继承中,不仅儿子可以继承,后代也可以继承。
可以继承
3.继承的特殊性
3.1标签的文本和颜色
和下划线是不能继承父元素的——的示例:
复制代码
样式类型='text/css '
div{
颜色:红色
font-size :24 px;
文本装饰:
无;
}
/style
身体
差异
H2我是头条/h2
a
Herf=' # '我是超链接/a
我是一个段落/p
/div
(在上面的代码中,只有P继承了div设置的属性,而A标签不能继承父元素的属性,颜色也不会变红,下划线也不会去掉。)
复制代码
3.2 h标签的文本大小也不能继承父元素(参见上面的代码,我是h2标签中的标题,不会继承div。
font-size :24 px;属性,所以需要单独为h2编写一个css样式:H2 { font-size :24 px;}
应用场景:
一般用来设置网页上的一些常见信息,比如网页的文字颜色、
字体、文本大小轻内容
格式:
正文{属性:值;}
第二,层压
例如,P标签,为P标签设置id和类名,并在选择器上选择P。
并设置与P的id或类名相同的属性,即级联。
三.优先事项:(三十一)
功能:当多个选择器(如选择P标签和P标签中设置的id或类昵称)选择同一标签并为同一标签设置同一属性时,
如何级联由优先级决定。
2.优先权判断的三种方式
2.1
是否直接选择,直接选择是指直接选择要设置css样式的标签,以及标签的id或类名。(间接选择是指继承,例如在ul中选择li来继承ul的属性称为继承属性)
如果是间接选择,谁离目标标签近,谁就听他的。
2.2是否是同一个选择器。
如果是同一个选择器,那么以后写的人都会听。(例如,为两个P标签设置css样式
p{color:blue}
p{color:red}
然后第二个p会作为标准,文本会变成红色。
2.3不同的选择器
如果它们都是直接选择的,并且不是同一类型的选择器,那么它们将遵循
级联的选择器优先级。
类id标记通配符继承浏览器默认值
重量计算
如果选择器中有直接和间接选择。即使间接选择器是id选择器,也会优先考虑直接选择的效果。
感谢阅读。以上就是“css样式的继承、级联、优先级的作用是什么”的内容。学习完这篇文章,相信你对css样式的继承、级联、优先级的作用有了更深的理解,具体用法还需要实践来验证。在这里,边肖将为您推送更多关于知识点的文章,敬请关注!
内容来源网络,如有侵权,联系删除,本文地址:https://www.230890.com/zhan/142056.html