Css基础教程(二十七)

1.Css选择器优先权值

Css选择器分为4个等级，每个等级代表一类选择器，每个等级的值为其所代表的选择器的个数乘以这一等级的权值。如下图所示：

内联样式表权值最高，为1000。例如：
id选择器。用四位数字表示id选择器的优先级就是：0 1 0 0。如：#con {}
类名选择器。用四位数字表示类名选择器的优先级就是：0 0 1 0。如：.h5course {}
标签名选择器。用四位数字表示标签名选择器的优先级就是：0 0 0 1。如：div {}
伪类选择器（如:hover等a标签常见的四种伪类）。用四位数字表示伪类选择器的优先级就是：0 0 1 0
通配符选择器（*）。当通配符单独出现的时候，其优先级为：0 0 0 0。如果它存在于后代选择器当中，涉及到优先级叠加运算的时候，其优先级为：0 0 0 1。

简单来说，就是以下规则：

!important > 内联样式 > ID选择器 > 类选择器 > 标签选择器 > 伪类选择器 > 通配符选择器

CSS 优先级法则：

选择器都有一个权值，权值越大越优先。
当权值相等时，后出现的样式表设置要优于先出现的样式表设置。
创作者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式。
继承的CSS 样式不如后来指定的CSS 样式。
在同一组属性设置中标有"!important"规则的优先级最大。

2.实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css选择器优先级别</title>
    <style>

        /*
          越能够精确定位元素的选择器的级别就越高。
          ID > 类 > 标签
          !important(不推荐使用) > 内部样式表 > ID > 类 > 标签
        */
        div {
            width: 200px;
            height: 200px;
            margin: 0 auto;
            border: 1px solid #ccc;
            /*background: lightskyblue !important;*/ /*提升属性优先级为最高。*/
            background: lightskyblue;
        }

        #box {
            background: lightpink;
        }

        #box2 {
            background: darkorange;
        }

        .main {
            background: aquamarine;
        }

        p {
            width: 400px;
            height: 200px;
            border: 1px solid #ccc;
            margin: 0 auto;
        }

        .p1 {
            background: aqua;
        }

        .p2 {
            background: chartreuse;
        }


        .p1.p2 {
            background: lightskyblue;
        }
    </style>

</head>
<body>
<h1>Css选择器的优先级别</h1>
<hr>
<div>
    DIV1
</div>
<br>
<div id="box">
    DIV2
</div>
<br>
<div id="box2" class="main">
    DIV3
</div>
<br>

<!--类样式表权值相同-->
<p class="p1 p2">
    我是段落1
</p>
<br>

<!--内联样式表权值最高-->
<p class="p2 p1" style="background: limegreen">
    我是段落2
</p>
</body>
</html>

运行效果：