CSS高级特性

CSS高级特性

之前我们已经学过了CSS的三个基本特性，分别是统一性，便捷性，分离性，这三个特性帮助我们对CSS的基础理解有很大的作用。同时CSS还有另外三个高级的特性，如下

继承性

CSS继承性算是一个比较明显的特征，当我们在父级元素上面设置一个样式以后，子级元素同样会应用到这个样式

<style type="text/css">
    .div1{
        width: 200px;
        height: 200px;
        border: 1px solid black;
        color: red;
        font-size: 32px;
    }
</style>
<div class="div1">
    这是div1下面的内容
    <p>这是p标签下面的内容</p>
</div>

我在div1上面设置了字体的颜色color与字体的大小font-size，我们可以年到div1盒子里面的文字变大了，同时p标签下面的文字与变大了，这什么为什么呢？

这个地方就是CSS继承性的体现，子级元素默认是可以继承父级元素的一些样式的

我们通过审查元素可以看到，p元素有一个继承的样式下来，如下所示

在上面的图片里面，我们又看到了，并不是所有的样式都继承下来了，只继承了color与font-size，而其它的样式没有继承

CSS里面允许父级元素某些样式被子级元素默认的继承下来，有些常用属性是不被继承的

• 可以被继承的常用属性

  color/font-*/text-*/line-height/visibility

• 不可以被继承的常用属性

  background-*/display/position/float/border/margin/padding/width/height

CSS里面上面的元素是可以被默认的继承下来的，但是如果想主动的去继承，也是可以的，只要在当前的属性值上面设置inherit

.div1>p{
    border: inherit;
}

这个时候p标签就是从级元素 div1上继承了border的样式

同时我们也要注意一点，怎么样不继承父级的样式呢？

<style>
	.div1{
        height: 100px;
        /*这个时候为了解决行内元素中间的空格，我们在父级元素上面给了一下font-size*/
        font-size: 0;
        /*这个时候子级元素span继承了这个样式，字体就不显示了*/
    }
    .div>span{
        /*这个时候就恢复了初始值，不从父级继承下来*/
        font-size:initial;
    }
</style>
<div class="div1">
    <button type="button">按钮</button>
    <span>选中我啊</span>
</div>

这个时候，我们在这里可以手动的选择这个元素，重新指定样式，但是大多数样式都有一个属性值initial

层叠性

CSS的层叠性指的是一个元素的样式应该是通过不同的设置堆叠起来的，它可以像搭积木一样，不停的去堆叠

我们现在看到页面上面有一个像这样的效果，但是这个元素为什么会表现了这个效果呢？

我们可以看到整个P元素的所有样式就一层一层这样的堆叠起来了。我们现在从下向上去看

• 第一步：先从父级的div1里面继承了font-size的属性
• 第二步：浏览器的默认样式 user agent style设置p标签的相关默认样式
• 第三步：.p1则是从外部的样式文件index.css里面获取的样式信息
• 第四步：.div1>p它是内部样式块时硕设置的样式信息
• 第五步：从style属性里面也设置了这个P元素的样式信息

📚 总结：层叠性指的就是一个元素最终的样式应该是由继承样式，默认样式，内部样式块，外部样式表，以及style共同决定的

优先级

既然有了CSS的层叠性，那么当我们的元素样式在进行层叠的时候，如果发生了样式冲突，应该怎么办呢？所以并然会有一个计算规范来得出它们的优先级，根据优先级来计算它们最的的样式

CSS的优先级又为两个部分

• 第一部分：层叠的优先级

  继承样式<默认样式<(内部样式块/外部样式表)<行内样式(style属性里的样式)

• 第二部分：选择器的优先级

  选择器的优先级遵守一个公式的计算，去得到当前选择器的权重值，谁的值大，就听谁的

  选择器	优先级权重
  *星号选择器	0
  标签选择器	1
  class类，属性选，伪类	10
  ID选择器	100
  style属性	1000
  !important	10000

  优先级权重相同的选择器里面，我们采用后面的覆盖前面的原则

  在上面的优先级权重里面，权重值不可以实现进位，也就是11个标签选择器权重相加也不可能大于class选择器

  <style type="text/css">
      p{
          font-size: 32px;
      }
      /* ---------------------------------- */
      /* 1+1=2 */
      div>p{
          color: blue;
      }
      /* 1 */
      p{
          color: red !important;
      }
      /* 10 */
      .p1{
          color: deeppink;
      }
      /*1+10=11*/
      p.p1{
          color: yellow;
      }
      /* 1+1+10=12 */
      div>p.p1{
          color: lightseagreen;
      }
      /* 1+10+1+10=22 */
      div.div1>p.p1{
          color: darkorange;
      }
      /* 100 */
      #b{
          color: greenyellow;
      }
      /* 1+100=101 */
      p#b{
          color: chocolate;
      }
      /* 10+100=110 */
      .p1#b{
          color: #000000;
      }
  </style>
  <div class="div1" id="a">
      <!-- 1000 -->
      <p class="p1" id="b" style="color: cyan;">这是一个标签</p>
  </div>
  

  注意：我们的CSS可以通过link标签去导入外部样式，在导入外部样式的时候，同样要注意它的导入顺序