css属性值计算过程

问题引入

我们在书写样式的时候，知道“就近原则”和“冲突计算”，以及“权重计算”这些知识。

但是下面这种情况呢：

<div class="container">
    <a>我是百度</a>
    <p>我是p</p>
</div>


<style>
    .container{
        color:"#f55";//p元素生效，a元素不生效，哪怕加了!important
    }
</style>

明明!important权重最高，为什么还是不生效呢？

这就涉及了浏览器的属性计算的过程了。

计算过程

一个元素一个元素依次渲染，顺序按照页面文档的树形目录结构进行 渲染每个元素的前提条件：该元素的所有CSS属性必须有值 一个元素，从所有属性都没有值，到所有的属性都有值，这个计算过程，叫做属性值计算过程

每个元素计算过程的要走以下的步骤

无属性值 -->

1.确定声明值

2.层叠冲突

3.使用继承

4.使用默认值

<--有属性值

1. 确定声明值

参考样式表中没有冲突的声明，作为CSS属性值

<h1 class="red">Lorem</h1>

<style>
/*
每一个元素都有这些的属性值
CSS属性值：
color:
background-color:
text-align:
font-size:
font-weight:
display:
其他CSS属性：...
*/
    
/*
	作者样式表
	.red{color:red;font-size:40px;}
    .h1{font-size:26px;}
    div h1.red{font-size:3em; font-size:30px;}
    
*/
    
    /*
	浏览器默认样式表
	h1{display: block; font-size: 2em; font-weight: bold;}
*/
    
这个时候优先找没有冲突的属性作为默认值
</style>

2. 层叠冲突

对样式表有冲突的声明使用层叠规则，确定CSS属性值

比较重要性(作者>浏览器默认) 比较特殊性(权重) 比较源次序(就近原则)

<h1 class="red">Lorem</h1>

<style>
/*
CSS属性值：
color:red
background-color:
text-align:
font-size:
font-weight:bold
display:block
其他CSS属性：...
*/
    
/*
    作者样式表
    .red{color:red;font-size:40px;}
    h1{font-size:26px;}
    div h1.red{font-size:3em; font-size:30px;}
    */
    
    /*
    浏览器默认样式表
    h1{display: block; font-size: 2em; font-weight: bold;}
    */
</style>

3. 使用继承

对仍然没有值的属性，若可以继承，则继承父元素的值

<style>
/*
CSS属性值：
color:red
background-color:
text-align:
font-size:
font-weight:bold
display:block
其他CSS属性：...
*/
    
    以上的代码可以看到虽然我们声明了一些样式属性，但是不是每一种都有，这个时候就会去看如果能继承的属性，就会继承到该元素上。
</style>

对于继承的样式，一般都是文字相关的可以被继承

4.使用默认值

对仍然没有值的属性，使用默认值

最终就是如果也没继承，那么浏览器就会使用默认值。

问题分析

问题分析

现在我们分析第一步引入的问题：

答案：

因为浏览器默认给了a元素声明了一个color:webkit-color

这个时候，我们走到了第一步:确定声明值，浏览器发现a已经声明了值，就直接应用了该值。所以后面的步骤就不去再修改了。

最佳实践

所以开发中，我们往往会主动设置a元素：

a{
    text-decoration:none;
    color:inherit;
}

特殊的两个CSS取值：

• inherit：手动（强制）继承，将父元素的值取出应用到该元素
• initial：初始值，将该属性设置为默认值