以前写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好