CSS样式优先级问题
在研究CSS样式优先级问题之前，我们先来梳理一下页面应用CSS样式的几种方式：
1，行内样式，利用元素的style属性添加样式，如：<p style="color:red;">行内样式</p>
2，内嵌样式，利用style标签给页面应用样式，如：<style type="text/css">p{ color:red;}</style>
3，导入样式，利用@import url();指令导入外部样式，如：<style type="text/css">@import url(style.css);</style>
4，外链样式，利用link标签把外部样式应用给页面，如：<link rel="stylesheet" type="text/css" href="style.css" />
（这里不讨论行内样式，众所周知，对于同一个需要应用样式的元素而言，除!important外，行内样式优先级最高）
一、选择符相同：内嵌、导入、外链样式的优先级
在选择符相同的情况下，样式优先级只与加载顺序有关，外链(link)、导入(import)、内嵌(style)遵循就近原则，后加载的样式优先级要高。如下：
1 <!DOCTYPE html > 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>样式优先级</title> 6 <link rel="stylesheet" type="text/css" href="link.css" /><!--p{ color:green;}--> 7 <style type="text/css"> 8 @import url("import.css"); /*p{ color:blue;}*/ 9 </style> 10 <style type="text/css"> 11 p{ color:red;} 12 </style> 13 </head> 14 <body> 15 <p>该段文字为红色</p> 16 </body> 17 </html>
1 <!DOCTYPE html > 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>样式优先级</title> 6 <link rel="stylesheet" type="text/css" href="link.css" /><!--p{ color:green;}--> 7 <style type="text/css"> 8 p{ color:red;} 9 </style> 10 <style type="text/css"> 11 @import url("import.css"); /*p{ color:blue;}*/ 12 </style> 13 </head> 14 <body> 15 <p>该段文字为蓝色</p> 16 </body> 17 </html>
1 <!DOCTYPE html > 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>样式优先级</title> 6 <style type="text/css"> 7 p{ color:red;} 8 </style> 9 <style type="text/css"> 10 @import url("import.css"); /*p{ color:blue;}*/ 11 </style> 12 <link rel="stylesheet" type="text/css" href="link.css" /><!--p{ color:green;}--> 13 </head> 14 <body> 15 <p>该段文字为绿色</p> 16 </body> 17 </html>
二、选择符不同：内嵌、导入、外链样式的优先级
在选择符不同的情况下，外链(link)、导入(import)、内嵌(style)样式的优先级受各自内部选择符权重的影响，如：
1 <!DOCTYPE html > 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>样式优先级</title> 6 <style type="text/css"> 7 body p{ color:red;} 8 </style> 9 <style type="text/css"> 10 @import url("import.css"); /*p{ color:blue;}*/ 11 </style> 12 <link rel="stylesheet" type="text/css" href="link.css" /><!--p{ color:green;}--> 13 </head> 14 <body> 15 <p>该段文字为红色</p> 16 </body> 17 </html>
1 <!DOCTYPE html > 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>样式优先级</title> 6 <style type="text/css"> 7 @import url("import.css"); /*body p{ color:blue;}*/ 8 </style> 9 <style type="text/css"> 10 p{ color:red;} 11 </style> 12 <link rel="stylesheet" type="text/css" href="link.css" /><!--p{ color:green;}--> 13 </head> 14 <body> 15 <p>该段文字为蓝色</p> 16 </body> 17 </html>
1 <!DOCTYPE html > 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>样式优先级</title> 6 <link rel="stylesheet" type="text/css" href="link.css" /><!--body p{ color:green;}--> 7 <style type="text/css"> 8 @import url("import.css"); /*p{ color:blue;}*/ 9 </style> 10 <style type="text/css"> 11 p{ color:red;} 12 </style> 13 </head> 14 <body> 15 <p>该段文字为绿色</p> 16 </body> 17 </html>
三，选择符权重值计算
每个元素标签权重为0,0,0,1
每个类、伪类、属性选择符权重为0,0,1,0
每个ID选择符权重为0,1,0,0
行内样式权重为1,0,0,0
如下，左起第1位的权重>第2位的权重>第3位的权重>第4位的权重 （对需要应用样式的同一个元素比较其不同选择符的权重才有意义）
1 <style type="text/css"> 2 div img{} /*0,0,0,2 2个元素标签*/ 3 div.main img{} /*0,0,1,2 1个类、2个元素标签*/ 4 div.main a:hover img{} /*0,0,2,3 1个类、1个伪类、3个元素标签*/ 5 #banner img{} /*0,1,0,1 1个ID、1个元素标签*/ 6 </style>
注意：对于同一元素的不同选择符，如果权重值相同，采用就近原则，最后写的选择符的样式生效，如下
1 <!DOCTYPE html > 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>样式优先级</title> 6 <style type="text/css"> 7 body p{ color:red;} 8 html p{ color:blue;} 9 </style> 10 </head> 11 <body> 12 <p>该段文字为蓝色</p> 13 </body> 14 </html>
四， 继承样式的优先级
子元素本身有某个样式的时候，如果父元素中也存在该样式，子元素本身的这个样式优先级最高，父元素中的样式不会生效。如下
1 <!DOCTYPE html > 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>样式优先级</title> 6 <style type="text/css"> 7 div{ color:red;} 8 .demo{ color:blue;} 9 </style> 10 </head> 11 <body> 12 <div class="demo"> 13 <div>该段文字为红色</div> 14 </div> 15 </body> 16 </html>
针对子元素div来说（内层div）color为red，父元素.demo（外层div）color为blue，咋一看.demo的权重高于div的权重文字颜色应该为blue，其实不然，这里子元素div的文字颜色为red，有同学说是因为继承的权重小于0,0,0,1 而我认为权重值的计算应该是针对需要应用样式的同一个元素来说的。就本例而言，需要应用样式的是子元素div而非父元素div，所以这里比较div和.demo的权重没有意义，声明div{color:red}直接匹配到子元素div，所以子元素div不需要继承父元素.demo中的color了。修改一下，也许这样更好理解
1 <!DOCTYPE html > 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>样式优先级</title> 6 <style type="text/css"> 7 p{ color:red;} 8 .demo{ color:blue;} 9 </style> 10 </head> 11 <body> 12 <div class="demo"> 13 <p>该段文字为红色</p> 14 </div> 15 </body> 16 </html>
首先，p和.demo直接作用于不同的元素，比较两者的权重值显得没有意义，其次，声明p{color:red}直接匹配到子元素p，所以无需再继承父元素.demo中的color。再修改一下
1 <!DOCTYPE html > 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>样式优先级</title> 6 <style type="text/css"> 7 div{ color:red;} 8 .demo{ color:blue;} 9 </style> 10 </head> 11 <body> 12 <div class="demo"> 13 <p>该段文字为蓝色</p> 14 <div>该段文字为红色</div> 15 </div> 16 </body> 17 </html>
这里子元素p没有声明样式所以继承了父元素.demo的样式，而子元素div直接匹配到了div{color:red}，所以无需再继承父元素中的color样式。
五，对页面元素应用样式需要注意的问题
1，对作用于同一个元素的样式，!important优先级最高。
2，使用@import url()指令导入样式的时候，该指令必须位于style标签的开头，否认不会生效，如下导入不成功
1 <!DOCTYPE html > 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>样式优先级</title> 6 <style type="text/css"> 7 p{ color:red;} 8 @import url("import.css"); /*p{color:blue}*/ 9 </style> 10 </head> 11 <body> 12 <p>该段文字为红色</p> 13 </div> 14 </body> 15 </html>
3，外链样式（link）跟HTML同步载入css文件，导入样式（import）在HTML加载完成之后载入css文件，网速较慢的情况下会导致页面混乱，所以一般用外链样式（link）给页面应用样式。
