每CSS的选择器都有一个分数,可以根据这些分数这计算这些CSS的优先级
1. 拥有!important,最有最高的优先级
2. 标签。伪类或伪对象,优先级分数为1
3. 类、属性选择,优先级分数为10
4.id选择,优先级分数为100
5.style属性,优先级分数为1000
6.其他选择符,如统配符,优先级分数为0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
p{color:blue;}
p.mycolor{color:black;}
.mycolor{color:yellow}
#mycolor{color:green}
</style>
</head>
<body>
<p>hello world 我是蓝色</p>
<p class="mycolor">hello world 我是黑色</p>
<p class="mycolor" id="mycolor">hello world 我是绿色</p>
<p style="color:red;" class"mycolor" id="mycolor" >hello world 我是红色</p>
</body>
</html>
p =1
p.mycolor = 11
.mycolor = 10
#mycolor = 100
style = 1000
如果是p{color:blue !important ;}那么所有的p标签的字体颜色都是蓝色的了