在合作的过程中,经常会遇到这样的问题,别人做的样式CSS,要保留它的基础上自己添加。然后添加了 发现没有覆盖别人而被别人覆盖了。遇到这样的问题的时候,我们可以这样解决:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>Untitled Document</title>
- <style type="text/css">
- .aa{
- font-family: Verdana, Arial, Helvetica, sans-serif;
- font-size: 12px;
- background-color: #FF0000 !important
- }
- .bb{
- font-family: Verdana, Arial, Helvetica, sans-serif;
- font-size: 12px;
- background-color: #FF0000;
- }
- </style>
- </head>
- <body>
- 以下两个DIV的样式基本一样,但是第一个的外挂(理解俺的意思就行了)样式:background-color后面加了一个 !important,所以,虽然第一个DIV行内(in line)CSS也定义了background-color,但是却是参照外挂的background-color,其它的没有指定 !important 的,就被行内的STYLE覆盖掉了.
- <div class="aa" style="background-color:#cc6600;font-size:16px;">中Class中包括:!important的样式</div> <div class="bb" style="background-color:#cc6600">不包括的样式</div>
- </body>
- </html>
效果:以下两个DIV的样式基本一样,但是第一个的外挂(理解俺的意思就行了)样式:background-color后面加了一个 !important,所以,虽然第一个DIV行内(in line)CSS也定义了background-color,但是却是参照外挂的background-color,其它的没有指定 !important 的,就被行内的STYLE覆盖掉了: