<input id="geren" type="button" value="個人獎勵" style="BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none;width:48%"> <input id="bumen" type="button" value="部門獎勵" style="BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none;width:48%">
兩個input 點擊觸發查事件並加入新的樣式
<style> /** 加下划線 */ .xiahua { BORDER-BOTTOM-STYLE: solid !important; } /*.noxiahua*/ /*{*/ /*BORDER-BOTTOM-STYLE: none !important;*/ /*}*/ </style>
加入代碼添加樣式
<script> $("#bumen").click(function(){ $("#bumen").addClass("xiahua"); $("#geren").removeClass("xiahua"); $.ajax({ type:"post", url:"/selectOneselectOnejian.do", success:function(data){ if(data.success){ for(var i = 0 ; i<data.data.length;i++){ $("#ge").empty(); $('#ge').append("<h5><span style=' style='color: #282828''>用戶:</span>"+data.data[i].jiali+"</h5>" + "<div class='mui-input-row mui-password'>" + "</div>" + "<h5><span style=' style='color: #282828''>記錄:</span>"+data.data[i].content+"</h5>" + "<div class='mui-input-row mui-password'>" + "</div>" + "<h5><span style=' style='color: #282828''>積分:</span>"+data.data[i].jifen+"</h5>" + "<div class='mui-input-row mui-password'>" + "</div>" + "<h5><span style=' style='color: #282828''>時間:</span>"+data.data[i].time+"</h5>" + "<div class='mui-input-row mui-password'>" + "</div>" + "</div>"+ "<hr style='height:1px;border:none;border-top:1px solid #282828;'/>" ); } }else{ $("#ge").empty(); $('#ge').append("<h5><span style=' style='color: #282828''>無記錄</span></h5>" ); } }, error:function(){} }) }) </script> <script> $("#geren").click(function(){ //$("#bumen").addClass("noxiahua"); $("#bumen").removeClass("xiahua"); $("#geren").addClass("xiahua"); $("#ge").empty(); $.ajax({ type:"post", url:"/selectOnejiangli.do", success:function(data){ if(data.success){ $("#ge").empty(); for(var i = 0 ; i<data.data.length;i++){ $('#ge').append("<h5><span style=' style='color: #282828''>用戶:</span>"+data.data[i].jiali+"</h5>" + "<div class='mui-input-row mui-password'>" + "</div>" + "<h5><span style=' style='color: #282828''>記錄:</span>"+data.data[i].content+"</h5>" + "<div class='mui-input-row mui-password'>" + "</div>" + "<h5><span style=' style='color: #282828''>積分:</span>"+data.data[i].jifen+"</h5>" + "<div class='mui-input-row mui-password'>" + "</div>" + "<h5><span style=' style='color: #282828''>時間:</span>"+data.data[i].time+"</h5>" + "<div class='mui-input-row mui-password'>" + "</div>" + "</div>"+ "<hr style='height:1px;border:none;border-top:1px solid #282828;'/>" ); } }else{ $("#ge").empty(); $('#ge').append("<h5><span style=' style='color: #282828''>無記錄</span></h5>" ); } }, error:function(){} }) }) </script>
一、語法
選擇器{樣式:值!import;}
二、說明
提升指定樣式規則的應用優先權,即!important為開發者提供了一個增加樣式權重的方法,讓瀏覽器首選執行這個語句。
例如下面這個樣式:
.xiahua
{
BORDER-BOTTOM-STYLE: solid !important;
}
如果是在除了IE6的瀏覽器中,這些瀏覽器支持!important屬性,也就是說他們會默認讓margin-left:20px!important; 這條語句生效,下面的不帶!important聲明的樣式將不會覆蓋它,換句話說就是他的級別最高,下面的人都不能取代我!
在IE6及以下瀏覽器有個比較顯式的支持問題存在,!important在同一條規則集里不生效。請看下述代碼:
div { margin-left:20px!important; } div { margin-left:40px; }
在上述代碼中,IE6及以下瀏覽器中div的margin-left與其它瀏覽器一致,都為20px;
注意:
1、IE6及更早瀏覽器下,!important在同一條規則集內不生效。
2、如果!important被用於一個簡寫的樣式屬性,那么這條簡寫的樣式屬性所代表的子屬性都會被作用上!important。
3、關鍵字!important必須放在一行樣式的末尾並且要放在該行分號前,否則就沒有效果。