如何覆盖外部CSS？

I'm using the YUI Javascript framework, which gives me a calendar widget that comes with a css file. These are included at the top of my Site.Master file. I'd like to override the style associated with the widget, but I can't seem to figure out how.

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

I've tried adding an entry for the widget's class:

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

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

in both my local css file, and in a style tag in the master file. When I use Internet Explorer's developer tools to look at the page's style, it lists 3 sources for that class's style: my local css file, the ASP.Net view for the page, and the external YUI css. It never references the master file, and even when I've got the class in my local css file, the style doesn't appear in the developer tools list of styles (I don't see .yui-calendar in the list it gives me).

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

So the question is, what's the proper way to override the style for the class coming in from the external css file?

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

6 个解决方案

#1

You might want to try adding units to that CSS:

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

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

You need units for values other than 0 in CSS.

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

#2

The visible CSS is determined in this order:

可见的CSS按以下顺序确定：

1)External style sheet

1）外部样式表

2)Internal style sheet (style tags)

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

3)Inline Style

3）内联风格

4)User Defined Style Sheet

4）用户定义的样式表

5)External Style Sheet with !important

5）外部样式表！重要

6)Internal Style Sheet with !important

6）内部样式表！重要

7)Inline style with !important

7）内联样式！重要

8)User Defined style with !important

8）用户定义的样式！important

The lowest one on that list which is declared will be the one that is used.

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

As a note, it is bad form to use !important as this can override user style sheets used by the visually impaired and can drastically reduce accessability/usability for these groups.

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

#3

I think you want to use !important (not sure though). See this page.

我想你想用！重要的（虽然不确定）。见本页。

#4

An inline style overrides any CSS style declaration.

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

So something like this:

所以这样的事情：

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

The inline style would override any external definition in this case.

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

As Jason S noted also, the !important attribute is a way for your local stylesheet rule to override any external declarations. Actually, this is probably the better of the 2, but they both work.

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

#5

Try to add !important at the end of each line of your style definition:

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

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

This will declare that your style definitions are higher-priority than the YUI ones. The W3c document explaining the use of !important is here.

这将声明您的样式定义优先于YUI的样式定义。解释使用！important的W3c文件就在这里。

#6

Paul Waite's answer should probably sort it out.

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

If not have you checked that YUI is not creating either inline styling or some other element that you're not targeting yet?

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

#1