Css:继承性解析。

前言

本人开始前端开发学习也快半个月了,跟着网络上比较有名的一些前端大神,目前也基本了解了前端开发需要掌握的一些技术知识点。
目前我们就来学习一下Css学习的一些知识点梳理。
1) 继承性
继承性描述的是网页标签的包括关系,被包裹的标签会继承父容器标签的选择器样式。
在这里插入图片描述

标签继承性的特点:
1)关于文字样式的属性,都具有继承性。这些属性包括:color、 text-开头的、line-开头的、font-开头的。
2)关于盒子、定位、布局的属性,都不能继承。

其实这里子标签继承父标签的一些属性样式存在一个弊端,就是当我们的子标签需要一些和父标签不一样的属性样式时就无法个性化。这个时候的解决方式就需要用到后代选择器,通过后代选择器来个性化子标签的属性样式。
在这里插入图片描述
层叠性:描述的是样式层叠存在相同的样式时的冲突方式。

样式冲突处理原则:
1)当多个选择器,作用在了同一标签的的时候(大多数在标签嵌套的时候),要按照如下顺序统计权重:d的数量,类的数量,标签的数量。因为对于相同方式的样式表,其选择器排序的优先级为:ID选择器 > 类选择器 > 标签选择器。

原则一首先比对的是基本选择器的数量,如果作用与同一个标签的选择器的数量一样,则根据作用域的大小进行排序:作用域越大的权重越小。

ID选择器 > 类选择器 > 标签选择器。

在这里插入图片描述
在这里插入图片描述
原则一还有一种情况就是,当不同的选择器作用与同一个标签时,我们就需要根据选择器定义的各种基本选择器的数量来对三种选择器作用权重进行比较。

注意:比较选择器之前一定要明确,选择器是否作用与同一个标签。

在这里插入图片描述

<html>
	<head>
		<meta charset="utf-8">
		<title>比对选择器的数量,决定听哪个选择器的</title>
		<style type="text/css">
			/**
			 * 排序规则是:作用域越大,权重越小
			 * 1:1:1
			 */
			#box1 .hezi2 p{
				color: red;
			}
			/**
			 * 1:0:3
			 比对规则:
			 1)先比对id选择器个数,大则胜出;
			 2)id选择器相同,比对类选择器的个数,大则胜出;
			 3)id选择器和类选择器都相同时,标签选择器数量大的胜出。
			 */
			div div #box3 p{
				color: green;
			}
			/**
			 * 0:3:4
			 */
			div.hezi1 div.hezi2 div.heizi3 p{
				color: blue;
			}
			/**
			 * 0:0:4
			 */
			div div div p{
				color:yellow;
			}
		</style>
	</head>
	<body>
	   <div class="hezi1" id="box1">
		   <div class="hezi2" id="box2">
			   <div class="hezi3" id="box3">
				   <p>猜猜我是什么颜色?</p>
			   </div>
		   </div>
	   </div>
	</body>
</html>

记住比对规则,是先按id选择器、类选择器、标签选择器这样的顺序进行数量统计,然后再依次比对这三个数的大小进行淘汰,胜出者则显示它的样式属性。

	 比对规则:
			 1)先比对id选择器个数,大则胜出;
			 2)id选择器相同,比对类选择器的个数,大则胜出;
			 3)id选择器和类选择器都相同时,标签选择器数量大的胜出。

在这里插入图片描述

CSS样式表的冲突的总结
1、对于相同的选择器,其样式表排序:行级样式 > 内嵌样式表 > 外部样式表(就近原则)
2、对于相同方式的样式表,其选择器排序:ID选择器 > 类选择器 > 标签选择器
3、外部样式表的ID选择器 > 内嵌样式表的标签选择器

在这里插入图片描述

important是英语里面的“重要的”的意思。我们可以通过如下语法:
格式:k:v !important;
来给一个属性提高权重。这个属性的权重就是无穷大。
注意:!important提升的是一个属性,而不是一个选择器
2)!important无法提升继承的权重,该是0还是0
3)!important不影响就近原则

最后总结:

Css的继承性是相对于Html网页标签的嵌套结构来说的,并不是指选择器之间的继承关系,包括后代选择器也是相对于Html网页描述嵌套关系的。也就是脱离了Html网页的标签嵌套结构,就不存在Css的继承性。
Css的嵌套性是针对选择器选中同一个Html网页标签时,对层叠样式冲突的的准则。需要注意一下几点:

1)选择器是否同时作用于同一个网页标签(是否选中)。
2)基本准则是作用域越大的标签,权重越小。比较方法就是按照权重进行依次淘汰。
3)没有选择上,通过继承影响的,就近原则,谁描述的近听谁的。如果描述的一样近,比如选择器权重,如果权重再一样重,谁写在后面听谁的。
CSS样式表的冲突的总结
1、对于相同的选择器,其样式表排序:行级样式 > 内嵌样式表 > 外部样式表(就近原则)
2、对于相同方式的样式表,其选择器排序:ID选择器 > 类选择器 > 标签选择器
3、外部样式表的ID选择器 > 内嵌样式表的标签选择器
总结:就近原则。ID选择器优先级最大。

举例:如果都是内嵌样式表,优先级的顺序如下:(ID 选择器 > 类选择器 > 标签选择器)
另外还有两个冲突的情况:

1、对同一个标签,如果用到了多个相同的内嵌样式表,它的优先级:定义的CSS样式表中,谁最近,就用谁。
2、对于同一个标签,如果引用了多个相同的外部样式表,它的优先级:html文件中,引用样式表的位置越近,就用谁。```

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值