<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>1. 实例演示权重的原理与计算方式</title> <style> /* 权重0,0,1 */ div { color: turquoise; } /* 权重1,0,2 */ div#id{ color:chartreuse } /* 权重0,1,2 */ div.class{ color:blue; } </style> </head> <body> <!-- 权重规则: 1. 实体标记: id, class, tag 2. 排列顺序: id, class, tag 3. 记数方式: 选择器中的实体标记数量 --> <div id="name"> 这是一个name标签 </div> <div class="class"> 这个是class标签 </div> </body> </html>