美文网首页
CSS的三大特性

CSS的三大特性

作者: Isaacyyy | 来源:发表于2017-02-22 10:02 被阅读0次

CSS的继承性

什么是继承性

作用给父元素设置一些属性,子元素也可以使用。就是继承性

注意点

只有以color/font/line/text开头的属性才可以集成,
只要是后代都可以继承,不是只有子元素可以继承。
a标签的颜色和下划线不可以继承。
h标签的大小也不可以继承。
应用场景,一般用于网页的一些共性信息,例如网页的文字颜色,字体,文字大小等内容。
一般通过给body设置一些属性。给其他标签继承。


CSS的层叠性

什么是层叠性

就是CSS处理冲突的一种能力

当多个选择器选中同一个标签,又设置了相同的属性。就会发生层叠性

CSS全称 Cascading Style Sheet 层叠式样式表。


CSS的优先级。

什么是优先级

作用:当多个标签选中同一个标签 设置了相同的属性 如何层叠就是优先级决定的。
优先级的三个判断方式

  • 是否是直接选中。(间接选中就是指继承)
    如果是间接选中。那么谁离目标标签比较近就听谁的。
  • 是否是相同的选择器
    如果都是直接选中并且是同类型的选择器,那么谁写在后面就听谁的。
  • 不同选择器直接选择
    如果都是直接选择,并且是通过不同的选择器那么就会按照选择器的优先级来确定
    !important>id>类>标签>通配符>继承>浏览器默认

什么是!important

作用是 用于提升某个直接选择标签的某个选择器中的某个属性优先级的。可以将被指定的属性的优先级提升到最高

注意点
  • !important 只能用于直接选中,不能用于间接选中。
  • 通配符选择器也是直接选中的
  • !important只能提升被他指定的属性的优先级,其他属性的优先级不会提升。

优先级的权重问题

什么是优先级的权重

当多个混合器混合在一起时,我们可以通过权重计算来判断谁的优先级最高。

权重的计算规则

1.1首先计算选择器中有多少个ID,ID多的优先级高。
1.2如果ID个数一样。看看有多少个类。类名个数多的。优先级最高。
1.3如果类名个数一样,看标签个数,标签名称多的优先级高
1.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/nhvpwttx.html