我在主样式表文件中使用@import
导入了另一个样式表。我希望在@import
样式表中所做的更改能够覆盖主样式表。这是否可能?
我在主样式表文件中使用@import
导入了另一个样式表。我希望在@import
样式表中所做的更改能够覆盖主样式表。这是否可能?
<head>
<title>Title</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="style-override.css" rel="stylesheet" type="text/css" />
</head>
这里的style.css
是原始样式表,而style-override.css
将包含您的新自定义css。这些样式将覆盖style.css
中的样式。这意味着您不需要使用!important
,因为样式已被覆盖。
尽可能避免使用!important。
要执行@import操作:
<style type="text/css">
@import url("style.css");
@import url("style-override.css");
</style>
另外顺带提一下,如果您愿意从页面中删除所有样式,请使用CSS重置。
<style type="text/css">
@import url("style.css");
@import url("reset.css");
@import url("style-override.css");
</style>
请查看http://meyerweb.com/eric/tools/css/reset/上的CSS重置样式,并将其添加到reset.css文件中。
@import
放在第一个样式表的末尾。!important
和@import
。@import url("style.css");
@import url("style-override.css");
这是全部内容。
如果您的第二个样式表使用相同的选择器,则应该可以在没有任何问题的情况下覆盖第一个。
CSS有非常严格的优先顺序来确定应该使用哪一个,但是如果其他所有条件都相等,并且两个样式具有完全相同的优先级,则将使用后面指定的一个。这使您可以通过稍后重复相同的选择器来覆盖样式。
这种情况唯一的例外是如果第一个样式被指定为!important
。在这种情况下,很难覆盖它。即使将另一个样式指定为!important
,也可能无法始终起作用(我曾看到某些浏览器中可以使用,但在其他浏览器中不行)。
因此,如果之前的样式表使用了!important
,那么您可能会遇到覆盖它的问题。但如果没有,那么就应该相当简单。
div#sample {
max-width: 75%;
}
关于新的 CSS 使用
body div#sample {
max-width: 75%;
}
请记住,过度合格的选择器并不是最好的选择;)