CSS 三大特性详细讲解

CSS 三大特性及代码解释

层叠性

当相同选择器设置相同样式且发生冲突时，此时后者的样式会覆盖（层叠）前者冲突样式。CSS的层叠性就是用于解决样式冲突问题。

Input：

<style>
        div {
            color: red;
        }
        div {  
            color: blue; <!-- 样式发生冲突 -->
        }
</style>

<div class="nav">
        I'm testing.
</div>

Output：
请添加图片描述

继承性

CSS中的继承是指：子标签继承父标签的样式，尤指和文字相关的样式（text-、font-、line-开头的样式等，以及color）

Input：

<style>
        .nav {
            color: pink;
        }
</style>
<div class="nav">
     <a href="#">链接标签能继承父本颜色吗？</a>
     <p>段落标签能继承父本颜色吗？</p>
</div>

Output：
请添加图片描述
可以看到标签链接是没有继承父级的字体样式，而段落标签继承了。这是因为属性值的计算是有具体步骤的，详见CSS字体颜色继承问题详解

特殊的行高继承

 <style>
        .nav {
            color: pink;
            font: 12px/1.5; <!-- 字体大小为12px，行高为当前文字大小的1.5倍 -->
        }
        .nav {
        font: 15px; <!-- 字体大小为15px，行高为15px x 1.5 -->
        }
</style>

优先级

当同一个元素指定多个选择器，选择器之间也有优先级
!important > 行内样式style=“” > ID选择器 > 类选择器 > 元素（标签）选择器 > 继承/通配符（*）选择器

<style>
	div {
	color: pink !important
	}
	#nav {
	color: green
	}
</style>
<div id="nav" style="color: blue">
    this is an example.
</div>

因为优先级排序为!important > id > div选择器，于是显示的内容文字应为粉色。

优先级叠加

请添加图片描述
如果是复合选择器，则会涉及权重叠加，此时需要计算权重。

Input：

<style>
        li {<!-- 该标签选择器权重为0,0,0,1 -->
            color: red;
        } 
        ul li { <!-- 该复合选择器权重为0,0,0,1 + 0,0,0,1 = 0,0,0,2（大于上者，因此样式执行此选择器中的样式） -->
            color: green;
        }
</style>
<div class="nav">
        <ul>
            <li>
                I'm testing.
            </li>
        </ul>
 </div>

Output：
毫无疑问的输出：
请添加图片描述

<style>
        li {<!-- 该标签选择器权重为0,0,0,1 -->
            color: red;
        } 
        ul li { <!-- 该复合选择器权重为0,0,0,1 + 0,0,0,1 = 0,0,0,2-->
            color: green;
        }
        .nac li {<!-- 该复合选择器权重为0,0,1,0 + 0,0,0,1 = 0,0,1,1（权重最高，因此样式执行此选择器中的样式） -->
            color: pink;
        }
</style>
<div class="nav">
        <ul>
            <li>
                I'm testing.
            </li>
        </ul>
 </div>