Css的优先级机制

样式的优先级

多重样式(Multiple Style):如果外部样式、内部样式、内联样式同时应用于同一个元素,就是使用多重样式的情况。

一般情况优先级如下:

(外部样式)External style sheet <(内部样式)Internal style sheet <(内联样式)Inline style

有一个例外的情况,就是如果外部样式放在内部样式的后面,则外部样式将覆盖内部样式。

示例如下:

<head>
    <style type="text/css">
      /* 内部样式 */
      h3{color:green;}
    </style>
 
    <!-- 外部样式 style.css -->
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <!-- 设置:h3{color:blue;} -->
</head>
<body>
    <h3>测试!</h3>
</body>

选择器的优先级:

内联样式表的权值最高1000,

ID选择器的权值为100,

class类选择器的权值为10,

html标签选择器的权值为1

CSS优先级法则:

A选择器都有一个权值:权值越大越优先。

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

C网页编写者设置的css样式的优先权高于浏览器设置的样式

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

E在同一组属性设置中标有"!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>
原文地址:https://www.cnblogs.com/zhaoleigege/p/5201018.html