CSS权值问题

在处理权值的时候，应该是按照下面的步骤进行的：

会把应用于同一个元素的所有样式声明拿出来
把这些样式分为正常声明和重要声明（声明里面含有！important）两种
如果有重要声明的话，正常声明就不用理他了，对重要声明按照权值进行排序，权值大的排下面
如果没有重要声明的话，就对正常声明按照权值排序，权值大的排下面
权值相同的按照内联>嵌入>外部进行排序
顺序执行排序好的声明，后执行的会对先执行的覆盖

再说一下权值

选择器中的ID属性值的权值为100
选择器中的类属性值、属性选择或伪类的权值为10
选择器中的元素和伪元素权值为1
通配选择器*权值为0
继承没有权值，跟权值为0有区别，下面我会说到
内联样式权值为1000

正常声明测试

下面是测试的HTML代码

<!DOCTYPE html>
<html>
    <head>
        <title>test</title>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="css.css" />
        <style type="text/css">
        h1{
            color:yellow;
        }
        </style>
    </head>
    <body>
        <div id="div">
            <h1 id="h1" style="color:blue;">hello world</h1>
        </div>
    </body>
</html>

CSS代码如下

#h1{
    color:green;
}
#div #h1{
    color:brown;
}
h1{
    color:red;
}

测试结果
CSS权值问题
这里面的步骤是：

拿出所有对h1的样式声明

//外部
#h1{                         //权值100
    color:green;
}
#div #h1{                //权值200
    color:brown;
}
h1{                          //权值1
    color:red;
}
//嵌入
h1{                            //权值1
        color:yellow;
}
//内联
color:blue                //权值1000

因为没有重要声明，所以按照权值排序，其中权值相同的权值相同的按照内联>嵌入>外部进行排序

//外部
h1{                          //权值1
    color:red;
}
//嵌入
h1{                            //权值1
        color:yellow;
}
//外部
#h1{                         //权值100
    color:green;
}
#div #h1{                //权值200
    color:brown;
}
//内联
color:blue                //权值1000

从上到下执行，后面执行的会覆盖前面的，所以最后的结果是蓝色

我们把内联样式删除掉，刷新页面，结果颜色为brown
CSS权值问题
再把这个brown的声明删除，结果为

把green的声明删除，结果为

重要声明测试

测试HTML代码

<!DOCTYPE html>
<html>
    <head>
        <title>test</title>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="css.css" />
        <style type="text/css">
        h1{
            color:yellow!important;
        }
        </style>
    </head>
    <body>
        <div id="div">
            <h1 id="h1" style="color:blue;">hello world</h1>
        </div>
    </body>
</html>

CSS代码

#h1{
    color:green!important;
}
#div #h1{
    color:brown!important;
}
h1{
    color:red!important;
}

结果为
CSS权值问题
这里面的步骤是：

拿出所有对h1的样式声明

//外部
#h1{                     //权值为100
    color:green!important;
}
#div #h1{               //权值为200
    color:brown!important;
}
h1{                        //权值为1
    color:red!important;
}
//嵌入
h1{                            //权值1
        color:yellow!important;
}
//内联
color:blue                //权值1000

把重要声明拿出来，按照权值排序，其中权值相同的权值相同的按照内联>嵌入>外部进行排序

//外部
h1{                          //权值1
    color:red;
}
//嵌入
h1{                            //权值1
        color:yellow;
}
//外部
#h1{                         //权值100
    color:green;
}
#div #h1{                //权值200
    color:brown;
}

从上到下执行，后面执行的会覆盖前面的，所以最后的结果是brown

我们把brown声明删掉，结果为
CSS权值问题
再把green声明删掉，结果为

把yellow声明删掉，结果为

删除这几个声明的时候我没动内联声明，这里可以看出来，无论正常声明的权值多高，都敌不过权值最低的重要声明，只要有重要声明，正常声明就不用去理他了

继承和通配选择器

测试HTML代码：

<!DOCTYPE html>
<html>
    <head>
        <title>test</title>
        <meta charset="utf-8" />
        <style type="text/css">
        div{
            color:red;
        }
        *{
            color:blue;
        }
        </style>
    </head>
    <body>
        <div id="div">
            <h1>hello world</h1>
            hello world <br />
            hello world
        </div>
    </body>
</html>

结果
CSS权值问题
因为blue颜色是h1继承div来的，所以没有权值，而通配选择器的话权值为0，0权值比没有权值大，所以h1显示的颜色是blue

样式分类

样式一共有三个来源：创作人员设计的样式、浏览器的默认样式、读者设置的样式
三者的权重排序为：读者设置的！important样式>创作人员设计的！important样式>创作人员设计的正常样式>读者设置的正常样式>浏览器的默认样式

写给自己看的，如果对你有帮助的话那就更好了，如果发现错误可以的话请指出，谢谢！

CSS权值问题

CSS权值问题

正常声明测试

重要声明测试

继承和通配选择器

样式分类

相关推荐