CSS——层叠

层叠

声明冲突：同一个样式，多次应用到同一个元素

层叠：解决声明冲突的过程，浏览器自动处理（权重计算）

比较重要性

重要性从高到低：

作者样式表：开发者书写的样式

1）作者样式表中的!important样式（开发中一般不适用）

<style>
a{
    color:red !important;
}
a{
    color:green;
}
</style>/*第一个样式表被浏览器使用*/

2）作者样式表中的普通样式

<style>
a{
    color:red;
}
</style>/*此样式覆盖浏览器默认样式*/

3）浏览器的默认样式

比较特殊性

看选择器

总体规则：选择器选中的范围越窄，越特殊

具体规则：通过选择器，计算出一个4位数（xxxx），数值较大者胜出

1. 千位：如果是内联样式，记1，否则记0
2. 百位：等于选择器中所有id选择器的数量
3. 十位：等于选择器中所有类选择器、属性选择器、伪类选择器的数量
4. 个位：等于选择器中所有元素选择器、伪元素选择器的数量

<style>
a{
/*0001*/
    color:red;
}
div ul a{
/*0003*/
    color:green;
}
#mydiv #myul a{
/*0201*/
    color:gray;
}
#mydiv #myul .mylink{
/*0210*/
    color:#008c8c;(马尔斯绿)
}
#mydiv #myul a:link{
/*0211*/
    color:chocolate;
}
</style>

<div id="mydiv">
<ul id="myul">
<li id="myli">
<a href=" " class="mylink">
我的CSS
</a>
</li>
</ul>
</div>

比较源次序

代码书写靠后者胜出

<style>
a{
    color:red;
}
a{
    color:#008c8c;
}
</style>/*马尔斯绿被浏览器选中*/

应用

书写一些作者样式表，覆盖浏览器的默认样式

重置样式表->浏览器的默认样式

常见的重置样式：normalize.css、reset.css 、meyer.css（可搜索获得）

在开发中一般先使用重置样式表先覆盖浏览器页面，然后再写相应的文件代码来开发。

爱恨法则书写方式：

<style>
:link{
    
}
:visited{
    
}
:hover{
    
}
:active{
    
}
</style>