欢迎光临
我的个人博客网站

CSS三大特性


CSS三大特性

CSS有三个非常重要的特性:层叠性、继承性、优先级。

1. 层叠性

给相同的选择器设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式。

层叠性主要解决样式冲突的问题。

层叠性原则:

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

2. 继承性

子标签会继承父标签的某些样式,如文本颜色和字号等。

子标签可以继承父标签的样式有:

  • text-开头的
  • font-开头的
  • line-开头的
  • color

行高的继承性:

body {     font: 1.5 Microsoft Yahei;/*1.5倍行高*/ } 

注:

  • 行高可以跟单位也可以不跟单位
  • 如果子元素没有设置行高,则会继承父元素的行高
  • 此时子元素的行高为:当前子元素的文字大小*1.5
  • 这种写法优势:里面子元素可以更具自己文字大小自动调整行高

3. 优先级

选择器 选择器权重
继承、* 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;/*表示优先级最高*/ } 

注:

  1. 权重不会有进位
  2. 等级判断从左到右,如果某一位数值相同,则判断下一位数值
  3. 继承的权重是0(即使加了!important也是0),如果改元素没有直接选中,不管父元素权重有多高,子元素得到的权重都是0

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

eg.

  1. div ul li -> 0,0,0,1+0,0,0,1+0,0,0,1=0,0,0,3
  2. .nav ul li -> 0,0,1,0,+0,0,0,1+0,0,0,1=0,0,1,2
  3. a:hover -> 0,0,0,1+0,0,1,0=0,0,1,1
赞(0) 打赏
未经允许不得转载:张拓的天空 » CSS三大特性
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏