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位构成的,我们不能加着加着把标签选择器变成了类选择器,这是不对的。

相关内容

热门资讯

保存时出现了1个错误,导致这篇... 当保存文章时出现错误时,可以通过以下步骤解决问题:查看错误信息:查看错误提示信息可以帮助我们了解具体...
汇川伺服电机位置控制模式参数配... 1. 基本控制参数设置 1)设置位置控制模式   2)绝对值位置线性模...
不能访问光猫的的管理页面 光猫是现代家庭宽带网络的重要组成部分,它可以提供高速稳定的网络连接。但是,有时候我们会遇到不能访问光...
表格中数据未显示 当表格中的数据未显示时,可能是由于以下几个原因导致的:HTML代码问题:检查表格的HTML代码是否正...
本地主机上的图像未显示 问题描述:在本地主机上显示图像时,图像未能正常显示。解决方法:以下是一些可能的解决方法,具体取决于问...
表格列调整大小出现问题 问题描述:表格列调整大小出现问题,无法正常调整列宽。解决方法:检查表格的布局方式是否正确。确保表格使...
不一致的条件格式 要解决不一致的条件格式问题,可以按照以下步骤进行:确定条件格式的规则:首先,需要明确条件格式的规则是...
Android|无法访问或保存... 这个问题可能是由于权限设置不正确导致的。您需要在应用程序清单文件中添加以下代码来请求适当的权限:此外...
【NI Multisim 14...   目录 序言 一、工具栏 🍊1.“标准”工具栏 🍊 2.视图工具...
银河麒麟V10SP1高级服务器... 银河麒麟高级服务器操作系统简介: 银河麒麟高级服务器操作系统V10是针对企业级关键业务...