css样式的继承性、层叠性 、优先级有什么作用

技术css样式的继承性、层叠性 、优先级有什么作用这篇文章主要讲解了“css样式的继承性、层叠性 、优先级有什么作用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“css样

本文主要讲解“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

(0)

相关推荐

  • 体表面积计算公式,基础代谢率对照表是什么

    技术体表面积计算公式,基础代谢率对照表是什么基础代谢率对照表是什么体表面积计算公式?基础代谢率对照表是指基础代谢率与年龄对应的表格。我国正常基础代谢率平均值如下表[kJ/(m²·h)]基础代谢率是指室温(18~25℃)条

    生活 2021年10月27日
  • docker容器源码怎样部署httpd用存储卷部署网站

    技术docker容器源码怎样部署httpd用存储卷部署网站这篇文章将为大家详细讲解有关docker容器源码怎样部署httpd用存储卷部署网站,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知

    攻略 2021年12月8日
  • Locust:简介和基本用法

    技术Locust:简介和基本用法 Locust:简介和基本用法我个人在性能测试工作中,负载生成工具使用的大多都是jmeter,现在来看看locust,因为可以用python编写脚本,进行定制化,而我自己

    礼包 2021年11月29日
  • first的基数词,1-20的序数词与基数词

    技术first的基数词,1-20的序数词与基数词序数词: firstfirst的基数词, second, third ,fourth, fifth, sixth, seventh, eighth, ninth, ten

    生活 2021年10月24日
  • 如何检查nodejs是否安装成功

    技术如何检查nodejs是否安装成功这篇文章主要为大家展示了“如何检查nodejs是否安装成功”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何检查nodejs是否安装成功”

    攻略 2021年11月7日
  • 复习:adb02

    技术复习:adb02 复习:adb_02冷启动:adb shell am start -W xxx1.热启动:
    按back按键再次启动:
    adb shell am start -W xxxadb she

    礼包 2021年11月20日