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>
image-20200603104926921

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

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

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

image-20200603105155854

在上面的图片里面，我们又看到了，并不是所有的样式都继承下来了，只继承了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的层叠性指的是一个元素的样式应该是通过不同的设置堆叠起来的，它可以像搭积木一样，不停的去堆叠

image-20200603113057717

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

image-20200603113411841

我们可以看到整个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标签去导入外部样式，在导入外部样式的时候，同样要注意它的导入顺序