CSS的三大特性

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

层叠性

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

层叠性原则:

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

例:

      div {
        color: pink;
      }
      div {
        color: red;
      }
    <div>I am the same</div>

层叠性1.png

  • 样式不冲突,不会层叠
      div {
        color: pink;
        font-size: 12px;
      }
      div {
        color: red;
      }

层叠性2.png

继承性

CSS中的继承:子标签会继承父标签的某些样式,如文本颜色字号

例:

      div {
        color: aquamarine;
        font-size: 12px;
      }
    <div>
      <p>I'm your son</p>
    </div>

继承性1.png

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

我们知道行高是可以继承的,先看下例子:

      body {
        color: aqua;
        font: 12px/24px "Microsoft YaHei";
      }
      <p>I'm your son</p>
      <div>I'm your son too</div>

行高继承1.png

但我们在实际开发当中,会经常看到这种写法:

      body {
        font: 12px/1.5 "Microsoft YaHei";
      }
  • 行高可以跟单位也可以不跟单位
  • 如果子元素设置行高,则当前子元素的文字大小是:子元素大小 * 1.5

例:1.5 * 14 = 21

      body {
        color: aqua;
        font: 12px/1.5 "Microsoft YaHei";
      }
      div {
        font-size: 14px;
      }

行高继承2.png

  • 如果子元素没有设置行高,则会继承父元素的行高,再继承行高 * 1.5

例:12 * 1.5 =18

      body {
        color: aqua;
        font: 12px/1.5 "Microsoft YaHei";
      }
      div {
        font-size: 14px;
      }
    <p>I'm your son</p>
    <div>I'm your son too</div>
    <ul>
      <li>I have no size</li>
    </ul>

行高继承3.png

  • body行高1.5这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高
优先级

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

  • 选择器相同,则执行层叠性
  • 选择器不同,则根据选择器权重执行

选择器权重如下表所示:

选择器选择器权重
继承或者*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: crimson;
      }
      .test {
        color: cyan;
      }
    <div class="test">I am a test</div>

选择权重1.png

例:

      div {
        color: crimson;
      }
      .test {
        color: cyan;
      }
      #example {
        color: yellow;
      }
    <div class="test" id="example">I am a test</div>

选择权重2.png

例:

    <div class="test" id="example" style="color: purple">I am a test</div>

选择权重3.png

例:

      div {
        color: crimson !important;
      }
      .test {
        color: cyan;
      }
      #example {
        color: yellow;
      }
    <div class="test" id="example" style="color: purple">I am a test</div>

选择权重4.png

优先级注意点
  1. 权重是有4组数字组成,但是不会有进位
  2. 可以理解为类选择器永远大于元素选择器,id选择器永远大于类选择器,以此类推
  3. 等级判断从左向右,如果某一位数值相同,则判断下一位数值
  4. 继承的权重是0,如果该元素没有直接选中,不管父元素权重多高,子元素得到的权重都是0

例:

      #fater {
        color: red;
      }
      p {
        color: greenyellow;
      }
    <div id="father">
      <p>I don't follow you</p>
    </div>

继承权重为0.png

Last modification:February 14th, 2021 at 04:27 pm