p1{ </span></li><li class=""><span>color:blue;/*<span class="tag"><</span><span class="tag-name">span</span><span> </span><span class="attribute">style</span><span>=</span><span class="attribute-value">"font-family:"</span><span>;"</span><span class="tag">></span><span>1</span><span class="tag"></</span><span class="tag-name">span</span><span class="tag">></span><span>没加important 显示为红色 */ </span></span></li><li class="alt"><span>} </span></li><li class=""><span>} </span></li><li class="alt"><span>.p2{ </span></li><li class=""><span>color:blue; </span></li><li class="alt"><span>color:red!important;/*2加上了important属性优先级高 显示为红色 */ </span></li><li class=""><span>} </span></li><li class="alt"><span>.p3{ </span></li><li class=""><span>color:red!important; </span></li><li class="alt"><span>color:blue;/*3但是这种情况下在ie6一下ie版本会显示为蓝色但是在其他浏览器都显示为红色 */ </span></li><li class=""><span> </span></li><li class="alt"><span>} </span></li><li class=""><span>/*4为了解决ie6及一下版本的兼容 把样式分开写 important的优先级高 显示为红色 */ </span></li><li class="alt"><span>.p4{ </span></li><li class=""><span>color:red!important; </span></li><li class="alt"><span>} </span></li><li class=""><span>.p4{ </span></li><li class="alt"><span>color:blue; </span></li><li class=""><span>} </span></li><li class="alt"><span> </span></li><li class=""><span><span class="tag"></</span><span class="tag-name">style</span><span class="tag">></span><span> </span></span></li><li class="alt"><span><span class="tag"></</span><span class="tag-name">head</span><span class="tag">></span><span> </span></span></li><li class=""><span><span class="tag"><</span><span class="tag-name">body</span><span class="tag">></span><span> </span></span></li><li class="alt"><span><span class="tag"><</span><span class="tag-name">p</span><span> </span><span class="attribute">class</span><span>=</span><span class="attribute-value">"p1"</span><span class="tag">></span><span>1没加important</span><span class="tag"></</span><span class="tag-name">p</span><span class="tag">></span><span> </span></span></li><li class=""><span><span class="tag"><</span><span class="tag-name">p</span><span> </span><span class="attribute">class</span><span>=</span><span class="attribute-value">"p2"</span><span class="tag">></span><span>2加了important属性</span><span class="tag"></</span><span class="tag-name">p</span><span class="tag">></span><span> </span></span></li><li class="alt"><span><span class="tag"><</span><span class="tag-name">p</span><span> </span><span class="attribute">class</span><span>=</span><span class="attribute-value">"p3"</span><span class="tag">></span><span>3IE6及一下版本识别不出来</span><span class="tag"></</span><span class="tag-name">p</span><span class="tag">></span><span> </span></span></li><li class=""><span><span class="tag"><</span><span class="tag-name">p</span><span> </span><span class="attribute">class</span><span>=</span><span class="attribute-value">"p4"</span><span class="tag">></span><span>4解决ie6及一下版本的兼容问题</span><span class="tag"></</span><span class="tag-name">p</span><span class="tag">></span><span> </span></span></li><li class="alt"><span><span class="tag"></</span><span class="tag-name">body</span><span class="tag">></span><span> </span></span></li><li class=""><span><span class="tag"></</span><span class="tag-name">html</span><span class="tag">></span><span> </span></span></li></ol></div><pre class="html" name="code" style="display: none; "><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
.p1{
color:blue;/*<span style="font-family:";">1</span>没加important 显示为红色 */
}
}
.p2{
color:blue;
color:red!important;/*2加上了important属性优先级高 显示为红色 */
}
.p3{
color:red!important;
color:blue;/*3但是这种情况下在ie6一下ie版本会显示为蓝色但是在其他浏览器都显示为红色 */
}
/*4为了解决ie6及一下版本的兼容 把样式分开写 important的优先级高 显示为红色 */
.p4{
color:red!important;
}
.p4{
color:blue;
}
</style>
</head>
<body>
<p class="p1">1没加important</p>
<p class="p2">2加了important属性</p>
<p class="p3">3IE6及一下版本识别不出来</p>
<p class="p4">4解决ie6及一下版本的兼容问题</p>
</body>
</html></pre><span>下面是测试结果：</span>
<p><font color="#000000" face="""><font face="""><font face="""><font face="""><font face="""><span><span>在ie6<span>显示结果</span></span></span></font></font></font></font></font></p>
<p><br></p>
<p><font color="#000000" face="""><font face="""><font face="""><font face="""><font face="""><span><span><span><img src="https://img-blog.csdn.net/20160728144725880?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt=""></span></span></span></font></font></font></font></font></p>
<p><span>在其他<span>浏览器及ie6以上显示</span></span></p>
<p><span><span><img src="https://img-blog.csdn.net/20160728144845226?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt=""></span></span><br></p>
<p><font color="#000000" face="""><font face="""><font face="""><font face="""><font face="""><span><span><span></span></span><br></span></font></font></font></font></font></p>
<p><font color="#000000" face="""><font face="""><font face="""><span><span><span></span><br></span></span></font><br></font></font></p>
</div>
<script type="text/javascript">
$(function () {