CSS的继承、层叠和特殊性

一：继承

继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。但注意有一些css样式是不具有继承性的。如border:1px solid red;

<style>
    p {
        color: red;
        border: 1px solid red;
    }
</style>

<p>Stevin<span>三天三夜</span>的专栏</p>
<p>有句话叫:只要你肯努力,<span>永远</span>没有既定的事实</p>

显示效果：

p中的文本与span中的文本都设置为了红色,但只给p标签设置了边框为1像素、红色、实心边框线，而对于子元素span是没用起到作用的。

二：特殊性

权值的规则：标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100，继承的权值最低

<style>
    p {
        color: red;
    }
    .first {
        color: blue;/*因为权值高显示为蓝色*/
    }
    p span {
        color: green;
    }
</style>

<p class="first"><span>Airbnb</span>在昨日宣布，任命葛宏担任Airbnb全球副总裁，全权负责Airbnb中国事务。
    葛宏履任之后，直接向Airbnb公司联合创始人兼CEO布莱恩·切斯基（Brian Chesky）汇报。</p>
<p>“葛宏对Airbnb爱彼迎的产品技术的了解无人能及，同时又能够深刻理解中国用户的习惯和特征，
    他将实现自身深厚的技术背景与中国市场需求的完美结合。”
</p>

显示效果：

三：层叠

层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。

<style>
    p {
       color: red;
    }
    p {
        color: blue;
    }
    p {
        color: green;
    }
</style>

<p>搜索公众号:Stevin三天三夜</p>

显示效果：

四：重要性

为某些样式设置具有最高权值，!important要写在分号的前面

<style>
    p {
       color: red!important;
    }
    p {
        color: blue;
    }
    p {
        color: green;
    }
</style>

<p>搜索公众号:Stevin三天三夜</p>

显示效果：