主页

1.层叠性

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

  • 样式冲突,遵循的原则是就近原则,那个样式离结构近,就执行那个样式
  • 样式不冲突,不会层叠

2.继承性

子标签会继承父标签的某些样式,如文本颜色和字号,简单的理解就是:子承父业

  • 恰当的使用继承可以简化代码,降低CSS样式的复杂性
  • 子元素可以继承父元素的样式(text-, font-, line- 这些元素开头的可以继承,以及color属性)

行高的继承

body {
  font: 12px/1.5 Microsoft YaHei;
}
  • 行高可以跟单位也可以不跟单位
  • 如果子元素没有设置行高,则会继承父元素的行高为1.5
  • 此时子元素的行高是:当前子元素的文字大小*1.5
  • body行高1.5这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高

3.优先级

权重
权重

  • 可以简单记忆法:通配符和继承权重为0,标签选择器为1,类(伪类)选择器为10,id选择器为100,行内样式为1000,!important无穷大
  • 继承的权重是0,如果该元素没有直接选中,不管父元素权重多高,子元素得到的权重都是0

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

0,0,0,1 + 0,0,0,1 + 0,0,0,1
div ul li  ----->          0,0,0,3
0,0,1,0 + 0,0,0,1 + 0,0,0,1
.nav ul li ----->          0,0,1,2
0,0,1,0 + 0,0,0,1
a:hover    ----->          0,0,1,1
0,0,1,0 + 0,0,0,1
.nav a     ----->          0,0,1,1

CSS

版权属于:Joe
作品采用:本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。
0
查看目录

目录

来自 《CSS-三大特性》
评论

博主很懒,啥都没有
46 文章数
7 评论量
3 分类数
49 页面数
已在风雨中度过 198天7小时25分