CSS样式权值的详细介绍

2020-11-27 来源：小侦探旅游网

内联样式表(InLine style)>内部样式表(Internal style sheet)>外部样式表(External style sheet)
例外：但如果外部样式表放在内部样式表下边引用,则外部样式表>内部样式表;
1,内联样式表权值为1000;
2,ID选择器的权值为100;
3,Class类选择器的权值为10;
4,HTML标签选择器的权值为1;
具体代码如下：

<!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> 
 <p id="redP"> 
 <p class="red"> 
 <span> 
 <em>emred</em> 
 </span> 
 </p> 
 <p>red</p> 
 </p> 
 </body> 
 </html>

-->

显示全文

全部栏目

CSS样式权值的详细介绍