CSS三大特性——层叠性、继承性和优先级(权重的叠加)

CSS三大特性

层叠性

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

层叠性原则:

​ 样式冲突,遵循就近原则,哪个样式离结构近就执行哪个样式。

​ 样式不冲突,不会层叠。

例如

div{
	color: red;
	font-size: 20px;
}
dic {
	color: pink;
}

在页面中会显示20像素粉色的文字,后面粉色会覆盖红色,但是前面文字大小并不会被覆盖。

继承性

CSS中子标签会继承父标签的某些样式。(主要继承与文字有关的样式)

适当使用继承可以简化代码。

body {
	font: 12px/1.5 'Microsoft yahei' ;
}

div {
	font-size: 14px;
}

div字体大小覆盖了body字体的大小,行高1.5倍,是当前字体大小的1.5倍,所以此时行高为21px;

行高设置1.5倍的优势就是可以根据自己文字的大小调整行高。

优先级

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

选择器相同,则执行层叠性。

选择器不同,则根据选择器权重。

选择器权重表

选择器 选择器权重
继承或者* 0,0,0,0
元素选择器 0,0,0,1
类选择器,伪类选择器 0,0,1,0
ID选择器 0,1,0,0
行内样式style="" 1,0,0,0
!important重要的 ∞ 无穷大
div{
	color: blue!important;
}

无论其他选择器位置如何,div里面文字颜色为蓝色。

权重由四组数字组成,永远不会有进位,比较时从左往右比较,如果某一位一样,就比较下一位。

继承权重为0,只要是继承过来的,权重都为0 。

a链接,浏览器默认指定了样式,蓝色有下划线,因此a继承过来的样式,a不会改变。

如果是复合选择器,则会有权重叠加,需要计算权重。

ul li {
	color: green;
}
li {
	color: red;
}

此时,li中的文字颜色会变成绿色。ul li 的权重为0,0,0,1+0,0,0,1,而li的权重为0,0,0,1,因此ul li的权重更高。

权重会叠加,但是不会有进位。

你可能感兴趣的:(前端开发,css)