CSS三大特性之层叠性
创始人
2024-04-15 22:27:10
0

CSS的三个特性:层叠性,继承性,优先级

层叠性:

相同选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式,层叠性主要解决样式冲突的问题。

层叠性原则:

样式冲突,遵循的原则是就近原则,那个样式离结构近,就执行那个样式样式不冲突,不会层叠

举例:



层叠样式

显示如下:

color被覆盖而font-size并没有被覆盖

在这里插入图片描述

继承性:

CSS中的继承:子标签会继承父标签的某些样式,如文本的颜色和字号。

举例:



我是div的子标签

显示如下:

在style中,我们并没有给p标签设置任何的属性,但由于它是div标签的子标签,所以他最终显示的效果是div的样式

在这里插入图片描述通过我们之前所讲的调试工具,它也能告诉我们p的样式是继承与div标签

在这里插入图片描述

继承性的优点:

1:恰当的使用继承可以简化代码量,降低CSS样式的复杂性

2:子元素可以继承父元素的样式(text-,font-,line-这些元素开头的属性都可以继承,以及color属性)

行高的继承性:

我们先来回忆一下综合设置字体样式的语法:

p{
font:font-style font-weight font-size/line-height font-family;
}

通过之前的学习我们知道,行高的单位是px,但行高也可以不带单位,但是不带单位并不是直接把px去掉,而是改变一下表示方法。

举例:

之前的写法:

div {color: blue;font: 15px/30px 宋体;
}

不带单位:

 div {color: blueviolet;font: 15px/2 宋体;//表示行高为当前文字大小的2倍,也就是30px
}

以上两种书写均正确!

如果子元素没有设置行高,则会继承父元素的行高

举例:



我是div1中的文字

我是p标签

显示如下:

我们并没有给p标签指定行高,仅仅是指定了它的文字大小,那么它就会继承父元素div的行高,此时的行高大小为p标签文字的大小×2

在这里插入图片描述而这样写的好处就在于我们能够通过子元素的文字大小自动调整它的行高

优先级:

当同一个元素指定多个选择器,就会有优先级的产生

选择器相同的情况下,则执行层叠性

就近原则!!

选择器不同,则根据选择器权重执行

在这里插入图片描述上表中的选择器权重由上到下依次增大,选择器权重越大,优先级越高

举例:



早上好

显示如下:

在这里插入图片描述其它的都是一样的方法,大家可以自行写代码体会一下,这里我们重点说一下最后一个选择器的用法:

!important选择器:

在选择器中,它的权重是最大的,可以理解为它能够强制性的将某个权重较低选择器中的某个样式显示出来,只需要在该样式后面+!important

举例:


早上好

显示如下:
在这里插入图片描述类选择器的权重大于标签选择器,所以此时应该显示的是类选择器中指定的样式,但由于在标签选择器的color属性后面,使用了!important,所以字体的颜色显示出来的是标签选择器中的样式,并非类选择器中的样式。

但是需要注意的是,标签选择器中的font-size属性并没有通过!important强制指定,因此字体的大小还是类选择器中指定的大小,!important只能用来指定单个的属性。

优先级----小tips:

1:权重是由4组数字组成,但是不会有进位2:等级判断从左到右,如果某一位数值相同,则判断下一位3:继承的权重是0,如果该元素没有被选中,不管父元素权重是多少,子元素得到的权重都是0

举例:



早上好

我是p标签

显示如下:

为什么p标签中的文字并没有像显示它的父类id选择器中的效果呢?

原因就是我们上述所说的,子元素继承的权重为0, 即使父元素的权重很高,但是在子元素这里都是0,因此p标签中的文字显示的效果为元素选择器中的样式

在这里插入图片描述
关于优先级,还有一个特殊的标签-----a标签:

下述实例中,我们对body部分进行了样式的设置:



早上好

我是p标签

我是超链接

显示如下:

在这里插入图片描述但是显示效果中a标签的文字依旧是绿色,查看style,我们也没有对a标签进行额外的样式设计呀

原因就是a标签被浏览器默认的设置为蓝色的带下划线的样式,所以即使没有对它设置新的样式,他也不会继承body的样式。

如果不想a标签显示浏览器默认的样式,那么我们可以通过元素选择器对其设置新的样式

举例:



早上好

我是p标签

我是超链接

显示如下:

在这里插入图片描述

权重的叠加问题:

权重的叠加一般出现在复合选择器中,这里就需要涉及权重的计算问题

举例:

   
  • 早上好
  • 中午好
  • 晚上好

取权重最大的值的样式进行显示

显示如下:
在这里插入图片描述注意:权重在叠加的过程中,不要进位

上述我们所举的例子涉及的选择器个数较少,但是当选择器的个数比较大时,就会出现叠加之后,最后一位变成了10,正确写法即为:0,0,0,10请记住,无论变成几十还是几百,第四位的数值都不能向上进一位,因为权重本身就是由4位构成的,我们不能加着加着把标签选择器变成了类选择器,这是不对的。

相关内容

热门资讯

银河麒麟V10SP1高级服务器... 银河麒麟高级服务器操作系统简介: 银河麒麟高级服务器操作系统V10是针对企业级关键业务...
【NI Multisim 14...   目录 序言 一、工具栏 🍊1.“标准”工具栏 🍊 2.视图工具...
AWSECS:访问外部网络时出... 如果您在AWS ECS中部署了应用程序,并且该应用程序需要访问外部网络,但是无法正常访问,可能是因为...
不能访问光猫的的管理页面 光猫是现代家庭宽带网络的重要组成部分,它可以提供高速稳定的网络连接。但是,有时候我们会遇到不能访问光...
AWSElasticBeans... 在Dockerfile中手动配置nginx反向代理。例如,在Dockerfile中添加以下代码:FR...
Android|无法访问或保存... 这个问题可能是由于权限设置不正确导致的。您需要在应用程序清单文件中添加以下代码来请求适当的权限:此外...
月入8000+的steam搬砖... 大家好,我是阿阳 今天要给大家介绍的是 steam 游戏搬砖项目,目前...
​ToDesk 远程工具安装及... 目录 前言 ToDesk 优势 ToDesk 下载安装 ToDesk 功能展示 文件传输 设备链接 ...
北信源内网安全管理卸载 北信源内网安全管理是一款网络安全管理软件,主要用于保护内网安全。在日常使用过程中,卸载该软件是一种常...
AWS管理控制台菜单和权限 要在AWS管理控制台中创建菜单和权限,您可以使用AWS Identity and Access Ma...