如何覆盖外部 CSS?

发布于 2024-08-14 21:31:30 字数 445 浏览 3 评论 0原文

我正在使用 YUI Javascript 框架,它为我提供了一个带有 css 文件的日历小部件。这些包含在我的 Site.Master 文件的顶部。我想覆盖与小部件关联的样式,但我似乎不知道如何实现。

添加小部件类的条目

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

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

所以问题是,重写从外部 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.

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).

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(6

浅唱ヾ落雨殇 2024-08-21 21:31:30

可见 CSS 按以下顺序确定:

1) 外部样式表

2) 内部样式表(样式标签)

3) 内联样式

4) 用户定义的样式表

5) 带 !important 的外部样式表

6) 带 !important 的内部样式表

7 ) 带 !important 的内联样式

8) 带 !important 的用户定义样式

声明的列表中最低的样式将是所使用的样式。

请注意,使用 !important 是一种不好的形式,因为这可能会覆盖视障人士使用的用户样式表,并可能大大降低这些群体的可访问性/可用性。

The visible CSS is determined in this order:

1)External style sheet

2)Internal style sheet (style tags)

3)Inline Style

4)User Defined Style Sheet

5)External Style Sheet with !important

6)Internal Style Sheet with !important

7)Inline style with !important

8)User Defined style with !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.

风向决定发型 2024-08-21 21:31:30

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

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

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

You might want to try adding units to that CSS:

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

You need units for values other than 0 in CSS.

溇涏 2024-08-21 21:31:30

我认为你想使用 !important (但不确定)。请参阅此页面

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

内心荒芜 2024-08-21 21:31:30

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

所以像这样:

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

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

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

An inline style overrides any CSS style declaration.

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.

许久 2024-08-21 21:31:30

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

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

这将声明您的样式定义比 YUI 的样式定义具有更高的优先级。解释 !important 使用的 W3c 文档是 这里

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

.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.

情话已封尘 2024-08-21 21:31:30

保罗·韦特的回答或许应该能解决这个问题。

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

Paul Waite's answer should probably sort it out.

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

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文