一、CSS三大特性
CSS三大特性:层叠性、继承性、优先级
二、层叠性
层叠性主要解决:冲突的问题,相同的选择器设置相同的样式,此时会产生样式冲突,层叠性使用就近原则,让一个样式覆盖掉另一个样式
样式冲突,遵循的原则就是就近原则,哪个样式离结构近,就执行哪个样式
样式不冲突,不会层叠
三、继承性
css的继承: 子标签会继承父标签的某些样式,如文本的颜色和字号,简单的理解就
是子承父业
子元素可以继承父亲元素的样式(text-,font-,line-这些元素开头的可以继承,以及color属性)
行高的继承:
body{
font:12px/1.5 microsoft yahei
//这是css中font的简写写法。字体:字体大小/字体行高 字体格式。
//这里的字体行高指的是:他是字体大小的多少倍,实际行高=字体大小*行高(1.5是倍数)
//实际行高 = 12 * 1.5px
}
行高可以跟单位也可以不跟单位,如果行高有单位,那就是设置的实际距离,如果行高没有单位,真实行高等于字体大小 乘以 行高的数值
如果子元素没有设置行高,就会继承父亲元素的行高,上述父元素行高为父元素字体大小的1.5倍,那么子元素的行高为子元素的字体大小1.5倍
无继承性的属性:display、width、height、margin、border、padding、background、float、position
可以继承的属性:visibility、cursor、font-size、font-family、color
四、优先级
选择器 | 选择器权重 |
---|---|
继承或者通配符* | 0,0,0,0 |
元素选择器 | 0,0,0,1 |
类选择器,伪类选择器 | 0,0,1,0 |
id选择器 | 0,1,0,0 |
行内样式 style= | 1,0,0,0 |
!important重要的 | 无穷大 |
权重是有4位数字组成的但不会有进位,可以理解为类选择器大于元素选择器、id选择器大于类选择器以此类推
等级判断从左向右,如果某一位数值相同,则判断下一位数值
可以简单的记为,通配符和继承权重为0,标签选择器为1,类,伪类为10,id选择器为100,行内样式表为1000,!important为无穷大
权重叠加 如果是复合选择器,则会有权重叠加,需要计算权重
div ul li 0,0,0,3 (三个元素选择器)
.nav ul li 0,0,1,2 (一个类选择器,两个元素选择器)
a:hover 0,0,1,1 (一个伪类选择器,一个元素选择器)
.nav a 0,0,1,1(一个类选择器,一个元素选择器)