CSS中样式覆盖优先顺序详解

2020-12-14 02:41:12 编辑 1 阅读量:365

# 一、样式的优先级
多重样式（Multiple Styles）：如果外部样式、内部样式和内联样式同时应用于同一个元素，就是使多重样式的情况。
一般情况下，优先级如下：
（外部样式）External style sheet =（内部样式）Internal style sheet <（内联样式）Inline style
如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式，反之相同。也就是说先加载的会被后加载的覆盖。
示例如下：
```html
<head>
    <style type="text/css">
      /* 内部样式 */
      h3{color:green;}
    </style>
    
    <link rel="stylesheet" type="text/css" href="style.css"/>
    
</head>
<body>
    <h3>测试！</h3>
</body>
 ```

# 二、选择器的优先权

1.  内联样式表的权值最高 1000；
2.  ID 选择器的权值为 100
3.  Class 类选择器的权值为 10
4.  HTML 标签选择器的权值为 1

利用选择器的权值进行计算比较，示例如下：

```
<html>
  <head>
    <style type="text/css">
        #redP p {
             /* 权值 = 100+1=101 */
             color:#F00;  /* 红色 */
        }
        #redP .red em {
             /* 权值 = 100+10+1=111 */
             color:#00F; /* 蓝色 */
        }
        #redP p span em {
             /* 权值 = 100+1+1+1=103 */
             color:#FF0;/*黄色*/
        }
    </style>
  </head>
  <body>
     <div id="redP">
        <p class="red">red
           <span><em>em red</em></span>
        </p>
        <p>red</p>
     </div>
  </body>
</html>
```
结果：`<em>` 标签内的数据显示为蓝色。

# 三、CSS 优先级法则：

1. 选择器都有一个权值，权值越大越优先；
2. 当权值相等时，后出现的样式表设置要优于先出现的样式表设置(是指后加载出来的样式表，如果是指style.css中的顺序，不是在html中的顺序)；
3. 创作者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式；
4. 继承的CSS 样式不如后来指定的CSS 样式；
5. 在同一组属性设置中标有“!important”规则的优先级最大；

示例如下：
```
<html>
  <head>
    <style type="text/css">
     #redP p{
        /*两个color属性在同一组*/
        color:#00f !important; /* 优先级最大 */
        color:#f00;
     }
    </style>
  </head>
  <body>
     <div id="redP">
       <p>color</p>
       <p>color</p>
     </div>
  </body>
</html>
```
结果：在Firefox 下显示为蓝色；在IE  6 下显示为红色；

# 四、使用脚本添加样式
当在连接外部样式后，再在其后面使用JavaScript 脚本插入内部样式时（即内部样式使用脚本创建），IE 浏览器就表现出它的另类了。一定不要在脚本中添加样式，不好维护也容易引进bug！！

---
参考：
- [1][css样式表中的样式覆盖顺序](http://www.qdker.com/archives/36.html)
- [2][CSS 的优先级机制[总结]](http://www.cnblogs.com/xugang/archive/2010/09/24/1833760.html)
- [3][CSS中样式覆盖优先顺序详解](http://www.111cn.net/cssdiv/css/66972.htm)

CSS中样式覆盖优先顺序详解

附件: