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)

相关推荐

  • Spring框架访问数据库的两种方式的小案例

    技术Spring框架访问数据库的两种方式的小案例 Spring框架访问数据库的两种方式的小案例1.1 以Xml的方式访问数据库的案例
    要以xml的方式访问数据库需要用到JdbcTemplate ,因为

    礼包 2021年10月19日
  • 网上值机提前多久,网上值机后需要提前多久到机场

    技术网上值机提前多久,网上值机后需要提前多久到机场在飞机起飞前2个小时网上值机提前多久,都可以去机场办理登机牌。可以前一天晚上去机场打印登机牌。乘坐飞机前,因需要打印登机牌,领取行程单,办理行李托运,过安检等手续。机场接

    生活 2021年10月22日
  • 草船借箭的意思,草船借箭,这个词是什么意思

    技术草船借箭的意思,草船借箭,这个词是什么意思草船借箭。这个典故来源于三国演义草船借箭的意思,周瑜要刁难诸葛亮,就他准备想为东吴除去诸葛亮,所以要他造好10万支箭,要知道没有相对应的材料,诸葛亮是造不好箭的。所以当时的鲁

    生活 2021年10月26日
  • go环境变量怎么配置

    技术go环境变量怎么配置这篇文章将为大家详细讲解有关go环境变量怎么配置,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。export GOROOT=/usr/local/goexport

    攻略 2021年11月18日
  • 幂的乘方50道计算题,求50道六年级计算题是方程

    技术幂的乘方50道计算题,求50道六年级计算题是方程64x 207=169 127x 61=117 78x 15=78 253x 161=165 18x 255=217 178x 115=178 97x 5=9 121x

    生活 2021年10月22日
  • python函数应用范例

    技术python函数应用范例这篇文章主要讲解了“python函数应用范例”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“python函数应用范例”吧!如何定义一个函数函数也

    攻略 2021年11月9日