浅谈CSS样式权值

内联样式表(InLine style)>内部样式表(Internal style sheet)>外部样式表(External style sheet)

例外:

但如果外部样式表放在内部样式表下边引用,则外部样式表>内部样式表;

1,内联样式表权值为1000;

2,ID选择器的权值为100;

3,Class类选择器的权值为10;

4,HTML标签选择器的权值为1;

具体代码如下:

XML/HTML Code复制内容到剪贴板 <!DOCTYPE html>   <html lang="en">   <head>       <meta charset="UTF-8">       <title>CSS样式权值</title>       <style>           body{                font-size: 20px;                font-weight: 900;             }            h3{                color: yellow;            }            #redP p{                /*权值100+1=101*/                color: #f00;                /*红色*/            }            #redP p.red em{                /*权值100+1+10+1=112*/                color: #00f;                /*蓝色*/            }            #redP .red em{                /*权值100+10+1=111*/                color: #0ff;                /*亮蓝色*/            }                  #redP p span em{                /*权值100+1+1+1=103*/                color: #ff0;                /*黄色*/            }        </style>       <link rel="stylesheet" href="style.css">   </head>   <body>       <h3>例外:外部样式表>内部样式表</h3>       <div id="redP">           <p class="red">               <span>                   <em>emred</em>               </span>           </p>           <p>red</p>       </div>   </body>   </html>  

以上这篇浅谈CSS样式权值就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

浅谈CSS样式权值