re:从0开始的CSS学习之路 3. CSS三大特性

0. 写在前面

很多的学习其实并不知道在学什么，学一个新东西学着学着就变成了抄代码，背概念。把看视频学习变成了一个赶进度的任务，到头来只学到了一些皮毛。

文章目录

0. 写在前面
1. CSS三大特性——层叠性
2. CSS三大特性——优先级
3. CSS三大特性——继承性

1. CSS三大特性——层叠性

层叠性：相同选择器（同等权重）对同一个元素设置样式时

不冲突的样式：样式都生效

冲突的样式：会根据“就近原则”，书写位置接近元素的样式会将位置远的样式覆盖

示例如下：




	
	
	Three Characteristics - Stackability
	.div1 {
		color: red;
	}
	
	.div1 {
		font-size: 50px;
		color: yellowgreen;
	}



	我是div1

实际上层叠性就是说，最底下的样式会最优先生效，这并不难理解，实际上就和程序的执行顺序一样

2. CSS三大特性——优先级

优先级：（权重）不同选择器选择同一个元素，并且设置相同样式时，CSS会根据优先级选择使用样式。

选择器的权重：

	行内样式								1,0,0,0
	id选择器								0,1,0,0
	类、属性、伪类选择器					0,0,1,0
	标签选择器							0,0,0,1
	通配符、继承							0,0,0,0

注意：

权重由四位整数组成，权重高优先执行。
权重从左到右依次比较，如高位相同，则比较下一位
权重可以叠加，但是不会进位
选择器分组单独计算

示例如下：




	
	
	Three Characteristics - priority
	/* #d1 {
		color: yellowgreen;
	} */
	
	/* 0,0,0,1+0,0,1,0=0,0,1,1 */
	div[] {
		color: orange;
	}
	
	/* 0,0,1,0+0,0,1,0=0,0,2,0 */
	.div1.div2 {
		color: red;
	}



	我是div

可以看到每一位的优先级都是独立计算的，而且不会进位

这里的属性选择器实际上是两部分组成：标签选择器+属性选择器，这也是在2. 选择器超长大合集中提到过的

3. CSS三大特性——继承性

继承性：一个元素的某些样式可以被后代元素继承

优点：合理使用继承性，可以简化代码

注意：

通常文本、字体相关样式可以继承。但是背景、布局相关的样式不会被继承。
a 链接不能继承文本颜色与下划线
h 标题标签不能继承字体大小

示例如下：




	
	
	three Characteristics - Inheritance
	.father {
		color: red;
		background-color: #c7decc;
	}
	
	body {
		font-size: 20px;
	}



	
		我是father
		我是son
		我是孙子span
		超链接
		我是标题

可以看到father里面的标签继承了father的样式，father整个的继承了body的字体大小也就是font-size。

也可以看到a不能继承字体的颜色，h不能继承字体的大小

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://net2asp.com/afae400c87.html