美文网首页
CSS的三大特性

CSS的三大特性

作者: 秋城晚风 | 来源:发表于2022-06-05 18:58 被阅读0次

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

1.1层叠性

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

层叠性原则:

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

样式不冲突,不会层叠。

1.2继承性

现实中的继承:我们继承了父亲的姓

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

恰当地使用继承可以简化代码,降低CSS样式的复杂性。

子元素可以继承父元素的样式(text-,font-,line-这些元素开头的可以继承,以及color属性)。

行高的继承性

行高可以跟单位也可以不跟单位。

如果子元素没有设置行高,则会继承父元素的行高为1.5。

此时子元素的行高是:当前子元素的文字大小*1.5。

1.3优先级

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

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

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

优先级注意点:

1.权重是有4组数字组成,但是不会有进位。

2.可以理解为类选择器永远大于元素选择器,id选择器永远大于类选择器,以此类推。

3.等级判断从左到右,如果某一位数值相同,则判断下一位数值。

4.可以简单记忆法:通配符和继承权重为0,标签选择器为1,类(伪类)选择器为10,id选择器100,行内样式表为1000,!important无穷大。

5.继承的权重是0,如果该元素没有被直接选中,不管父元素权重多高,子元素得到的权重都是0。

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

相关文章

  • CSS的三大特性总结(深入理解css权重)

    【目录】 css的三大特性层叠性特性说明原理DEMO继承性优缺点重点DEMOhtml代码css代码优先级css特殊...

  • CSS的特性

    CSS的特性 1.层叠性 在两个样式权限相同的情况下,同一个标签中如果样式属性发生冲突,后面的会将前面的属性覆盖掉...

  • CSS相关文章

    前端面试之 CSS3 新特性 除了 HTML5 的新特性,CSS3 的新特性也是面试中经常被问到的。如何用 js ...

  • CSS 特性

    继承性 给父元素设置一些属性, 子元素也可以使用, 这个我们就称之为继承性 1.并不是所有的属性都可以继承, 只有...

  • CSS特性

    继承 CSS的一些特性,最常见的就是继承,CSS的有些属性是可以继承的,如果没有样式,则会继承父标签样式。比如co...

  • CSS 特性

    层叠性 样式冲突,遵循就近原则 样式不冲突,不会层叠 结果为红色25px的:Hello World 继承性 子标签...

  • CSS特性

    CSS属性的继承 CSS中有些属性是可继承的,何为属性的继承?一个元素如果没有设置某属性的值,就会跟随父元素的值当...

  • CSS特性

    Display - 块和内联元素 块元素是一个元素,占用了全部宽度,在前后都是换行符。内联元素只需要必要的宽度,不...

  • CSS特性

    一、CSS3 图像的背景 背景图片设定 backgroundCSS允许应用纯色作为背景,也允许使用背景图像创建相当...

  • 三十九、CSS3的新特性(上)

    一、CSS3的新特性 1.1、CSS的现状 新增的CSS3特性有兼容性问题,ie9+才支持。 移动端支持优于PC端...

网友评论

      本文标题:CSS的三大特性

      本文链接:https://www.haomeiwen.com/subject/gshrmrtx.html