美文网首页
CSS的三大特性

CSS的三大特性

作者: 幸运密码_xymm16888 | 来源:发表于2017-09-21 23:56 被阅读0次

一、继承性( Inherited ):给父元素设置的属性,子孙元素也可以使用。
应用场景:一般用于设置网页上的一些共性信息,文字大小、字体颜色等

注意点:
1、不是所有的属性都可以继承,只有以 color / font- / text- / line 开头的属性才可以继承。
2、继承性中的特殊性:
a标签中的文字颜色和下划线,不能通过继承修改(不是亲生的)
h标签中的文字大小,不能通过继承修改(不是亲生的)

二、层叠性:CSS处理冲突的一种能力

注意点:
层叠性只有在多个选择器中选择同一个标签,然后又设置了相同的属性,才会发生层叠。

CSS:层叠式样式表

三、优先级:当多个选择器选择同一个标签,并且给同一个标签设置属性时,如何层叠由优先级来决定。

优先级判断的三种方式:
-是否是直接选中:间接选中就是继承方式,如果是间接选中,谁离目标标签比较近就听谁的。

-是否是相同的选择器:如果是相同选择器,谁写在后面就听谁的。

-是否不同的选择器:按照选择器的优先级层叠

优先级:
id > 类 > 标签 > 通配符(也是直接选择器) > 继承 > 浏览器默认

优先级 ! important :用于提升优先级权限,只能用于直接选择器,不能用于间接选择器。

格式:
id选择器 {color:red; }
标签选择器 {color:green !important;} // 提升优先级,此时 标签优先于 id

优先级的权重:当多个选择器混合在一起设置属性时,可以通过权重来计算哪一个选择器的优先级最高。

权重计算规则:
1、属性设置时,id选择器最多的优先级最高
2、id选择器一样多时,类名选择器多的优先级最高
3、类名选择器一样多时,标签选择器多的优先级最高
4、id选择器一样多、类名选择器一样多、标签选择器一样多时,权重停止计算,写在最后的选择器的优先级最高。

相关文章

  • 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/wbetextx.html