以前寫html有個不好的習慣，就是把樣式添加到標籤內，雖然寫的時候覺得方便，但之後維護起來真心麻煩，一個樣式要改，所有頁面跟着改，當時沒有想到其他簡便的方法，就手動更改。因爲內聯樣式優先級高，再引入css覆蓋樣式不起作用，後來才發現有能覆蓋掉內聯樣式的方法。就是加上!important，它可以改變樣式優先級，降低內聯樣式的優先級。
如下代碼沒有加上!important，頁面顯示的是100*100的色塊，內部樣式沒生效。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>案例</title>
<style type="text/css">
div{
background-color: red;
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<div style="width: 100px;height: 100px;"></div>
</body>
</html>
加上之後內聯樣式被內部樣式替代了。也就達到不用修改原來代碼的目的了，不過還是要說，儘量樣式不要寫在標籤內。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>案例</title>
<style type="text/css">
div{
background-color: red;
width: 50px !important;
height: 50px !important;
}
</style>
</head>
<body>
<div style="width: 100px;height: 100px;"></div>
</body>
</html>還有一種方法，使用js來實現的，獲取元素，然後更改元素的樣式，$("div").css("width":"50");
用js這個方法不推薦，比較麻煩，還是用css好