CSS优先级查询

Question

我有一个相当基本的网站设置使用JQuery-UI主题css从内容服务器。CSS是不可修改的。我想做的是覆盖一些css从JQuery主题，例如改变从:

.ui-tabs .ui-tabs-panel {
  padding: 1em;
}

.ui-tabs .ui-tabs-panel {
  padding: 0.25em;
}

重写CSS的最好方法是什么?我是否应该使用!important或者有其他替代方法(除了直接在网页中定义新规则)。

谢谢

Answer 1

你有几个选项不用!important.

可以添加特异性:

body .ui-tabs .ui-tabs-panel {
  padding: 0.25em;
}

在初始规则之后定义覆盖规则

.ui-tabs .ui-tabs-panel {
  padding: 1em;
}

…(单独的文件稍后加载，或相同的文件，只是进一步:

.ui-tabs .ui-tabs-panel {
  padding: 0.25em;
}

Answer 2

你需要做一个"更具体"的CSS声明来覆盖它。

你在HTML树中指定一些东西来做这个:

div ui-tabs

或

div.wrappingClass .ui-tabs

或暴力破解方法:

body .ui-tabs

这里有一个方便的工具来检查:

http://www.suzyit.com/tools/specificity.php