CSS样式优先级汇总

日期:2015年9月17日      标签:前端

CSS引入方式的优先级

我们知道CSS有三种引入方式,分别是通过link标签引入的外部样式、通过style标签引入的内部样式、以及直接在元素上写的内联样式。

按官方说法以上3种的引入方式的优先级是:

内联样式 > 内部样式 > 外部样式

但是有特殊情况: 经测试外部样式和内部样式的优先级是由引入顺序决定的。

测试代码如下:

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">
    <title>CSS样式优先级</title>
    <!--内部样式-->
    <style type="text/css">
    #header {
       color: #0f0; /*绿色*/
    }
    p {
        color: #ccc; /*灰色*/
    }
    </style>
    <!--外部样式-->
    <link rel="stylesheet" type="text/css" href="index.css" />
    <!-- index.css的内容
    #header {
        color:#00f; //蓝色
    }
    p {
        color: #000; //黑色
    }
    -->
</head>  
<body>  
    <p>hello world!</p>
    <div id="header" style="color:#f00;">hello world!</div>
</body>  
</html>  

测试结果:两个hello world的颜色分别是黑色和蓝色,将引入顺序调换一下,颜色变为灰色和绿色。

CSS选择器的优先级

CSS选择器有:内联选择器、ID选择器、class选择器、元素选择器;这四种样式的优先级是:

内联选择器 > ID选择器 > class选择器 > 元素选择器

* 内联样式表的权值最高 为1000;

  • ID选择器的权值为 为100

  • Class类选择器的权值为 为10

  • HTML标签选择器的权值为 为1

当我们不知道当前写的样式的优先级的时候可以通过权值进行一个计算。原则上我们不推荐在ID选择器前面加其他选择器。因为ID选择器具有唯一性,可以提高页面的渲染效率。

CSS 优先级法则:

A 选择器都有一个权值,权值越大越优先;

B 当权值相等时,后出现的样式表设置要优于先出现的样式表设置;

C 创作者的规则高于浏览者:即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式;

D 继承的CSS 样式不如后来指定的CSS 样式;

E 在同一组属性设置中标有"!important"规则的优先级最大。  

`

(正文完)



© 喻小右 2016 京ICP备15064386号-1