Question

我有一个页面，我使用2个css样式：

<link type="text/css" href="base_form.css" rel="stylesheet" />
<link type="text/css" href="extended_form.css" rel="stylesheet" />

extended_form.css必须在基地之后。

有没有办法强制extended_form.css覆盖base_form.css？

Answer 1

您是否尝试在当前的CSS语句后添加!important？它充当覆盖并覆盖指定选择器的给定样式。

示例：

<!-- html -->
<html><body id="foo"></body></html>

<!-- css -->
body { background: #0000FF; }
body#foo { background: #FF0000; }

通常分配id并将其用作选择器会覆盖应用于元素的“全局”样式，但请考虑以下css：

body { background: #0000FF !important; }
body#foo { background: #FF0000; }

上述声明将#foo呈现背景设置为#0000FF而不是#FF0000。

在jsFiddle.net上查看：

Answer 2

!important是覆盖样式的最佳方式。

例如：

base_form.css有样式

.header {
  width:100%;
}

extended_form.css有样式

.header {
  width:80%;
}

如果要覆盖extended_form.css

中的样式

.header {
  width:80% !important;
}