Question

我正在使用YUI Javascript框架，它为我提供了一个带有css文件的日历小部件。这些包含在我的Site.Master文件的顶部。我想覆盖与小部件相关联的样式，但我似乎无法弄清楚如何。

我尝试为小部件的类添加一个条目：

.yui-calendar
{
 height:10;
 width:10;
}

在我的本地css文件中，以及主文件中的样式标记中。当我使用Internet Explorer的开发人员工具查看页面的样式时，它列出了该类样式的3个来源：我的本地css文件，页面的ASP.Net视图和外部YUI css。它从不引用主文件，即使我在本地css文件中有类，该样式也没有出现在样式的开发人员工具列表中（我没有在列表中看到.yui-calendar我）。

所以问题是，从外部css文件覆盖类的样式的正确方法是什么？

Answer 1

可见CSS按此顺序确定：

1）外部样式表

2）内部样式表（样式标签）

3）内联样式

4）用户定义的样式表

5）带有！important

的外部样式表

6）带有！important

的内部样式表

7）带有！important

的内联样式

8）用户定义的样式，带有！important

声明的列表中最低的一个将是使用的那个。

作为一个注释，使用它是一种不好的形式！重要，因为它可以覆盖视障人士使用的用户样式表，并且可以大大降低这些群组的可访问性/可用性。

Answer 2

您可能想尝试向该CSS添加单位：

.yui-calendar
{
 height:10px;
 width:10px;
}

CSS中需要单位为0以外的值。

Answer 3

我想你想使用!important（虽然不确定）。请参阅this page。

Answer 4

内联样式会覆盖任何CSS样式声明。

这样的事情：

<div class="yui-calendar" style="height:10px;width:10px;"></div>

在这种情况下，内联样式将覆盖任何外部定义。

正如Jason S所指出的，!important属性是本地样式表规则覆盖任何外部声明的一种方式。实际上，这可能是2中更好的，但它们都有效。

Answer 5

尝试在样式定义的每一行末尾添加!important：

.yui-calendar
{
  height: 10 !important;
  width: 10 !important;
}

这将声明您的样式定义优先于YUI的样式定义。解释!important用法的W3c文档是here。

Answer 6

Paul Waite的回答应该可以解决。

如果没有检查过YUI是否没有创建内联样式或其他尚未定位的元素？

我怎样才能覆盖外部CSS？

6 个答案: