css冲突了，请问怎么解决，谢谢。
我有一个main.css

今天用到一个浏览器版本提示的插件，里面有个style.css

现在发现后面的style.css文件冲突了，导致用ul、li区域显示的图标位置错乱。
main.css如下：

ul {
padding: 0;
margin: 0;
list-style-type: none;
}

span {
padding: 0;
margin: 0;
}

li {
padding: 0;
margin: 0;
list-style-type: none;
}

style.css 如下：

#ie-alert-panel ul {
list-style: none;
margin:0;
padding:0;
}

#ie-alert-panel li {
float:left;
margin:0 22px 0 0;

}
#ie-alert-panel li.last {
margin-right:0;
}

js文件如下：

/*
 * IE Alert! jQuery plugin
 * version 1
 * author: David Nemes http://nmsdvid.com
 * http://nmsdvid.com/iealert/
 */

(function($){
$("#goon").live("click", function(){
$("#ie-alert-overlay").hide();
$("#ie-alert-panel").hide();  
});
function initialize($obj, support, title, text){

var panel = "<span>"+ title +"</span>"
  + "<p> "+ text +"</p>"
      + "<div class='browser'>"
      + "<ul >"
      + "<li><a class='chrome' href='https://www.google.com/chrome/' target='_blank'></a></li>"
      + "<li><a class='firefox' href='http://www.mozilla.org/en-US/firefox/new/' target='_blank'></a></li>"
      + "<li><a class='ie9' href='http://windows.microsoft.com/en-US/internet-explorer/downloads/ie/' target='_blank'></a></li>"
      + "<li><a class='safari' href='http://www.apple.com/safari/download/' target='_blank'></a></li>"
      + "<li><a class='opera' href='http://www.opera.com/download/' target='_blank'></a></li>"
      + "<ul>"
      + "</div>"; 

var overlay = $("<div id='ie-alert-overlay'></div>");
var iepanel = $("<div id='ie-alert-panel'>"+ panel +"</div>");

var docHeight = $(document).height();

overlay.css("height", docHeight + "px");



     

if (support === "ie8") { // shows the alert msg in IE8, IE7, IE6

if ($.browser.msie  && parseInt($.browser.version, 10) < 9) {

$obj.prepend(iepanel);
$obj.prepend(overlay);

}

if ($.browser.msie  && parseInt($.browser.version, 10) === 6) {


$("#ie-alert-panel").css("background-position","-626px -116px");
$obj.css("margin","0");
  
}


} else if (support === "ie7") { // shows the alert msg in IE7, IE6
 
 
if ($.browser.msie  && parseInt($.browser.version, 10) < 8) {

$obj.prepend(iepanel);
$obj.prepend(overlay);
}

if ($.browser.msie  && parseInt($.browser.version, 10) === 6) {

$("#ie-alert-panel").css("background-position","-626px -116px");
$obj.css("margin","0");
  
}

} else if (support === "ie6") { // shows the alert msg only in IE6

if ($.browser.msie  && parseInt($.browser.version, 10) < 7) {

$obj.prepend(iepanel);
$obj.prepend(overlay);

  $("#ie-alert-panel").css("background-position","-626px -116px");
$obj.css("margin","0");

}
}

}; //end initialize function


$.fn.iealert = function(options){
var defaults = { 
support: "ie7",  // ie8 (ie6,ie7,ie8), ie7 (ie6,ie7), ie6 (ie6)
title: "\u4F60\u77E5\u9053\u4F60\u7684Internet Explorer\u662F\u8FC7\u65F6\u4E86\u5417?", // title text
text: "\u4E3A\u4E86\u5F97\u5230\u6211\u4EEC\u7F51\u7AD9\u6700\u597D\u7684\u4F53\u9A8C\u6548\u679C,\u6211\u4EEC\u5EFA\u8BAE\u60A8\u5347\u7EA7\u5230\u6700\u65B0\u7248\u672C\u7684Internet Explorer\u6216\u9009\u62E9\u53E6\u4E00\u4E2Aweb\u6D4F\u89C8\u5668.\u4E00\u4E2A\u5217\u8868\u6700\u6D41\u884C\u7684web\u6D4F\u89C8\u5668\u5728\u4E0B\u9762\u53EF\u4EE5\u627E\u5230.<br /><br /><h1 id='goon' style='font-size:20px;cursor:pointer;'>>>>\u7EE7\u7EED\u8BBF\u95EE</h1>"
};


var option = $.extend(defaults, options);




return this.each(function(){
if ( $.browser.msie ) {
var $this = $(this);  
initialize($this, option.support, option.title, option.text);
} //if ie
});       

};
})(jQuery);

[解决办法]
css 会根据 重要性 来决定 css的优先度。有 id选择器的 css （就是 #ie-alert-panel ul）会 高于 元素选择器（就是ul｛｝）的，就是 style.css会覆盖 main.css。
建议：可以 在style.css里 去掉 id选择器 ，就是 如下所示：

 ul {
    list-style: none;
    margin:0;
    padding:0;   
}
 li {
    float:left;
    margin:0 22px 0 0;
         
}
li.last {
    margin-right:0;
}

然后 先引入 main.css ,再引入 style.css 这样 在这个页面中 ，sytle.css的 ul会覆盖 main中的 ul样式。
[解决办法]
如果 想 用main.css的样式 ,引用顺序 可以倒过来