关闭

CSS三大特性之优先级

标签: html前端优先级CSS
298人阅读 评论(0) 收藏 举报
分类:

优先级的顺序:行内样式>id选择器>类选择器>标签选择器>*通配符选择器>继承


有点晕,先看代码,例如有如下代码,运行后的字体颜色为红色,可以从行内样式依次进行屏蔽,就可以发现样式的优先级如上所述


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * { /*通配符选择器*/
            color: pink;
        }
        body {  /*继承*/
            color: green;
        }
        div {   /*标签选择器*/
            color: blue;
        }
        .d1 {   /*类选择器*/
            color: yellow;
        }
        #d2 {   /*id选择器*/
            color: purple;
        }
    </style>
</head>
<body>
    <!--行类样式-->
   <div style="color: red " class="d1" id="d2">优先级</div>
</body>
</html>


但是优先级有个变数就是important,它可以改变选择器的优先级,如果在某个样式后面添加了important后,该选择器的优先级就会最高,例如:还是如上代码,给类选择器添加important后,字体颜色就会变成黄色。</span>

.d1 {   /*类选择器*/
    color: yellow !important;
}


但是important有一个特殊性,它用在继承上不起作用,因为属性无法继承。例如给body添加important,其它选择器不添加,最后字体的颜色还是红色。

body { /*继承选择器*/ 
     color: green !important;
}

接下来讲优先级的权重

权重算法:(0 0 0 0

第一个0对应着important的个数,

第二个0对应着id选择器的个数

第三个0对应着类选择器的个数

第四个0对应着标签选择器的个数

比较方法:先从第一个0开始比较,如果第一个0大,那么说明这个选择器的权重高,如果第一个相同,则比较第二个,依此类推。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div div { /*(0, 0, 0, 2)*/
            color: red;
        }
        div .son { /*(0, 0, 1, 1)*/
            color: blue;
        }
        div #son {/*(0, 1, 0, 1)*/
            color: pink;
        }
        .father div {/*(0, 0, 1, 1)*/
            color: yellow;
        }
        .father .son {/*(0, 0, 2, 0)*/
            color: green;
        }
        .father #son {/*(0, 1, 1, 0)*/
            color: purple;
        }
        #father div {/*(0, 1, 0, 1)*/
            color: gray;
        }
    </style>
</head>
<body>
<div class="father" id="father">
    <div class="son" id="son">权重</div>
</div>
</body>
</html>

 

通过权重的算法我们可以很快的得知最后字体的颜色为紫色

如果给下面的样式添加了!important,则权重变成最高,字体颜色将为绿色

.father .son {/*(1, 0, 2, 0)*/
    color: green !important;
}


最后说一下选择器的工作原理

选择器在查找元素的时候不是从左往右找,而是从右往左找

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        /*从左往右找*/
        div div { /*先找到一个子元素标签为div,然后再找这个元素是否有一个父元素标签也为div*/
            color: red;
        }
        div {
            color: blue;
        }
    </style>
</head>
<body>
<div>
    文字
    <div>
        文字
        <div>文字</div>
    </div>
</div>
</body>
</html>
结果显而易见是:蓝,红,红


1
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:59294次
    • 积分:1238
    • 等级:
    • 排名:千里之外
    • 原创:66篇
    • 转载:0篇
    • 译文:0篇
    • 评论:3条
    文章分类
    最新评论