三大特性(继承性，层叠性，优先级)

CSS有三大特性分别是: 继承性，层叠性，优先级。

一、继承性

概念 给父元素设置一些属性，子元素也可以使用，这个我们就称之为继承性。

注意

1.并不是所有的属性都可以继承, 只有以color/font-/text-/line-开头的属性才可以继承

2.在CSS的继承中不仅仅是儿子可以继承, 只要是后代都可以继承

3.继承性中的特殊性

   3.1 a标签的文字颜色和下划线是不能继承的

   3.2 h标签的文字大小是不能继承的

示例

<!-- 样式部分 -->

<style type="text/css">

    .father {

    	 width: 300px;            /*设置宽度*/

    	 font-size: 20px;         /* 设置字体*/

    	 text-align: right;       /* 字体右对齐*/

    	 background-color: green; /*背景颜色绿色*/

    	 color:red; /*字体颜色红色*/

     }

 </style>

<!-- html部分 -->

 <body>

    <div class="father">father标签

      <p>father子标签 p</p>

    </div>

  </body>

运行结果

从这个例子中可以看出子标签p继承了父类div的样式。

二、层叠性

概念 层叠性就是CSS处理冲突的一种能力。层叠性只有在多个选择器选中 同一个标签, 然后又设置了相同的属性, 才会发生层叠性。

示例

<html>

<head>

    <title>CSS三大特性之层叠性</title>

    <style>

        p {

            color: red;

        }

        p {

            color: blue;

        }

    </style>

</head>

<body>

  <p style="color: black">我是段落</p> <!-- 最终显示black 就近原则 black > blue > red -->

</body>

</html>

在相同优先级的的情况下 下面的样式元素会将上面的层叠掉。

三、CSS优先级

概念 当多个选择器选中同一个标签, 并且给同一个标签设置相同的属性时, 如何层叠就由优先级来确定。

优先级

!important>行内样式>id选择器>类选择器>标签选择器>通配符>继承

补充说明

1、继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。

2、行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。

3、权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。

4、CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。

关于CSS权重，有一套计算公式来去计算，用一个四位的数 字串(CSS2是三位)来表示，更像四个级别，值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。

部分权重是可以叠加的。比如的例子：

div ul  li   ------>      0,0,0,3

a:hover      -----—>      0,0,1,1

.son ul li   ------>      0,0,1,2

.son a       ------>      0,0,1,1

#son p       ------>      0,1,0,1

注意

对于并集选择器来说不是权重的加和，因为理论上它还是独立的，它只相当于将多个选择器的相同内容归于一个并集选择器中，理论上每一个选择器还是独立的。

示例

<!DOCTYPE html>

<html>

<head>

	<title></title>

	<style type="text/css">

		div,p {

			color: green; /*这里不能是0,0,0,2 而是两个0,0,0,1*/

		}

		p {

			color: red;  /*对于p标签最终会显示红色 0,0,0,1 (因为和上面优先级一样，所以下面会覆盖上面样式)*/

		}

	</style>

</head>

<body>

	<p>标签什么颜色</p>

</body>

</html>

四、经典测试题

这里举几个测试题来巩固下css优先级的知识。首先我们要知道如何推断标签的最终样式

1. 先找到影响文字的最里面的盒子

2. 然后计算权重

3. 如果权重一样，看层叠性

1、第一题

<!DOCTYPE>

<html>

	<head>

		<title>第2题</title>

		<style type="text/css">

			#father{

				color:red;  /* 继承的权重为 0,0,0,0 */

			}

			p{

				color:blue;  /* 权重 0,0,0,1 */

			}

		</style>

	</head>

	<body>

		<div id="father">

			<p>试问这行字体是什么颜色的？</p>

		</div>

	</body>

</html>

答案 蓝色。

2、第二题

<!DOCTYPE>

<html>

	<head>

		<title>第1题</title>

		<style type="text/css">

			#father #son{    /*权重: 0,2,0,0 */

				color:blue;

			}

			#father p.c2{   /* 权重: 0,1,1,1 */

				color:black;

			}

			div.c1 p.c2{    /* 权重 0,0,2,2 */

				color:red;

			}

			#father{

				color:green !important;  /* 继承的权重为 0,0,0,0 */

			}

		</style>

	</head>

	<body>

		<div id="father" class="c1">

			<p id="son" class="c2">

				试问这行字体是什么颜色的？

			</p>

		</div>

	</body>

</html>

答案 蓝色。

3、第三题

<!DOCTYPE>

<html>

<head>

	<title>Document</title>

	<style type="text/css">

		div div div div div div div div div div div div{  /* 权重 0,0,0,11 (最后一位数再怎么相加都不会向前进一位) */

			color:red;

		}

		.me{

			color:blue; /* 权重 0,0,1,0 */

		}

	</style>

</head>

<body>

	<div>

		<div>

			<div>

				<div>

					<div>

						<div>

							<div>

								<div>

									<div>

										<div>

											<div>

												<div class="me">试问这行文字是什么颜色的</div>

											</div>

										</div>

									</div>

								</div>

							</div>

						</div>

					</div>

				</div>

			</div>

		</div>

	</div>

</body>

</html>

答案 蓝色。

4、第四题

<!DOCTYPE>

<html>

<head>

	<title>第四题</title>

	<style type="text/css">

		.c1 .c2 div{       /* 权重 0,0,2,1 */

			color: blue;

		}

		div #box3{         /* 权重 0,1,0,1 */

			color:green;

		}

		#box1 div{         /* 权重 0,1,0,1 */

			color:yellow;

		}

	</style>

</head>

<body>

	<div id="box1" class="c1">

		<div id="box2" class="c2">

			<div id="box3" class="c3">

				文字显示什么颜色

			</div>

		</div>

	</div>

</body>

</html>

答案 黄色 （如果权重一样，看层叠性）

```
你如果愿意有所作为，就必须有始有终。(6)
```

CSS(4)---三大特性(继承性，层叠性，优先级)的更多相关文章

  1. 认识CSS中css的三大特性：层叠性、继承性以及优先级

    前端之HTML.CSS(四) CSS CSS三大特性 层叠性:多种样式的叠加,一个属性通过两个选择器设置在同一个元素上,后一个样式会把前一个样式层叠(覆盖).层叠性的两种情况:第一种样式冲突时,后样式 ...

  2. H5 25-CSS三大特性之层叠性

    25-CSS三大特性之层叠性 我是段落 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  3. 0017 CSS 三大特性：层叠性、继承性、优先级

    目标: 理解 能说出css样式冲突采取的原则 能说出那些常见的样式会有继承 应用 能写出CSS优先级的算法 能会计算常见选择器的叠加值 5.1 CSS层叠性 概念: 所谓层叠性是指多种CSS样式的叠加 ...

  4. CSS的三大特性（继承、层叠和优先级）

    CSS的三大特性(继承.层叠和优先级) 1.css属性的继承 CSS中有些属性是可继承的,何为属性的继承? 一个元素如果没有设置某些属性的值,就会跟随(继承)父元素的属性值.当然,一个元素如果有设置自 ...

  5. CSS继承性+层叠性+盒子+浮动

        CSS继承性+层叠性+盒子+浮动 CSS继承性 <style>         div{             color: pink;             font-siz ...

  6. Javascript面向对象三大特性（封装性、继承性、多态性）详解及创建对象的各种方法

    Javascript基于对象的三大特征和C++,Java面向对象的三大特征一样,都是封装(encapsulation).继承(inheritance )和多态(polymorphism ).只不过实现 ...

  7. css三大特效之层叠性

    css三大特效之层叠性

  8. CSS三大特性（继承、优先级、层叠）之个人见解

    首先声明一下CSS三大特性——继承.优先级和层叠.继承即子类元素继承父类的样式,比如font-size,font-weight等f开头的css样式以及text-align,text-indent等t开 ...

  9. css 两大特性:继承性和层叠性

    css 有两大特性: 继承性和层叠性, 继承性 面向对象语言都会存在继承的概念,在面向对象的语言中,继承的特点:继承了父类的属性和方法.那么我们现在主要研究css,css中没有方法,所以我们仅仅继承属 ...

随机推荐

  1. centos8安装图解

    CentOS 8 的新特性 DNF 成为了默认的软件包管理器,同时 yum 仍然是可用的 使用网络管理器(nmcli 和 nmtui)进行网络配置,移除了网络脚本 使用 Podman 进行容器管理 引 ...

  2. 简单cookie入侵

    在当前网站,按下F12键进入开发者模式,在console控制台输入:document.cookie获取cookie值如: 复制你得到cookie值,你或通过每种方式获取Cookie,例如:当别人点击你 ...

  3. asp.net core 腾讯验证码的接入

    asp.net core 腾讯验证码的接入 Intro 之前使用的验证码服务是用的极验验证,而且是比较旧的,好久之前接入的,而且验证码服务依赖 Session,有点不太灵活,后来发现腾讯也有验证码服务 ...

  4. html隐写术，使用摩尔兹电码/莫尔兹电码存储信息 水波纹样式 Morse code

    html水波纹样式,源码直接下载,代码有注释教程,小白可以看懂. 动画啥的都做好了,效果我觉得还不错 网上文章看到xbox 工程师使用隐写术,在界面的右下角放上了含有用户激活码的水波纹样式,一般人还真 ...

  5. Java学习笔记之基础语法(顺序，条件，循环语句)

    顺序结构:自上而下 条件分支选择结构: if条件语句   1,一旦某一个分支确定执行以后,其他分支就不会执行.if后面的条件必须是boolean类型   2,if  后面如果不加大括号,默认相邻的下一 ...

  6. php中代码执行&&命令执行函数

    转自i春秋 1.eval()函数 #传入的参数必须为PHP代码,既需要以分号结尾. #命令執行:cmd=system(whoami); #菜刀连接密码:cmd <?php @eval($_POS ...

  7. 代码审计-phpcms9.6.2任意文件下载漏洞

    漏洞文件: phpcms\modules\content\down.php 1.在download函数中对文件的校验部分 首先 if(preg_match('/(php|phtml|php3|php4 ...

  8. Dubbo+Zookeeper(一)Zookeeper初识

    前面花了一段时间去学习SpringCloud的相关知识,主要是理解微服务的概念并使用SpringCloud的一系列组件实现微服务落地.学习这些组件本身是简单的,跟着操作一遍基本就会了,这也得益于Spr ...

  9. vue系列文章 --- 源码目录结构整理（三）

    vue的版本是:^2.6.10 结构如下: |----- vue | |--- dist # 打包之后的目录vue文件 | | |--- vue.common.dev.js | | |--- vue. ...

  10. human_pose_estimation_demo的再进一步研究

    这次研究的主要是速度问题,后来还获得了其它方面的收获. 1.原始的抽帧       对于这样一个问题,想提高速度,能够想到的最简单.最直接的方法就是“抽帧”.比如添加一个计数器 这里,只有当Sumof ...