内联时覆盖 CSS 类的一部分？答案

【问题标题】：Override bits of a CSS class while inline?内联时覆盖 CSS 类的一部分？
【发布时间】：2012-10-05 21:00:38
【问题描述】：

我有一个由 CSS 类设置样式的 html img。在某些情况下，我想覆盖该类中使用的宽度和高度值。

我正在使用 Microsoft 为 .Net 系统提供的称为 TagBuilder 类的东西构建这个 img 标记，它允许开发人员将属性分配给 html 元素。

在这种情况下，一个 CSS 类已分配给 img 标签，我可以单独分配宽度和高度属性，但它们不会优先于 CSS 类中设置的值。

我的标签目前是这样的：

<img alt="my link" class="static" height="240" id="StaticImage" src="http://imageserver.com/myImage.jpg" width="240">

静态 CSS 类的宽度和高度值各为 300，如您所见，我试图用 240 覆盖它们。在这种情况下它不起作用，但我可以在没有第二个 CSS 类的情况下这样做吗？

【问题讨论】：

你试过style="height:240px; width:240px"
您是通过“static”类还是通过#StaticImage 设置类？通过 id/# 设置类将比设置为类 (.static) 的规则具有更高的优先级。内联样式（就像这里其他人建议的那样）将覆盖 class 和 id 驱动的 css 规则。
@jtheman - 成功了。谢谢。
@Mike - 该类是通过 .static 类在 CSS 中设置的。
@larryq 在这种情况下，就像我提到的那样，您可以走内联样式的路线（就像其他人建议的那样），或者您也可以将样式信息设置为“#StaticImage”将覆盖 .static 类。很高兴您找到了解决方案！

标签： css class overriding

【解决方案1】：

尽量缩小您的元素选择范围。越具体，您必须覆盖声明的机会就越大。例如，添加类和元素的 ID：

#StaticImage.static {
   height: 240px; 
   width: 240px;
}

你甚至可以疯狂地添加它的属性：

#StaticImage.static[alt=my link] {
   height: 240px; 
   width: 240px;
}

如果失败，提高其优先级：

#StaticImage.static {
   height: 240px !important; 
   width: 240px !important;
}

您可以通过包含其父元素使其更加具体。内联 css 可以覆盖其他所有内容吗？当然可以，但是如果您可以添加内联 css，为什么不添加另一个类来进一步缩小您的选择范围呢？这样您就可以控制文件中的所有 CSS。

另外，检查是否有一行 JavaScript 强制元素的大小。 JavaScript 可以改变 css 值，不管它是什么。

【讨论】：

【解决方案2】：

您可以将style 属性添加到您的img：

<img alt="my link" class="static" height="240" id="StaticImage"
src="http://imageserver.com/myImage.jpg" width="240"
style="height:240px;width:240px;">

【讨论】：

【解决方案3】：

您可以使用内联 CSS

<img alt="my link" style="width:240px; height:240px;" class="static" id="StaticImage" src="http://imageserver.com/myImage.jpg">

或

在您的 CSS 中，您可以使用 !important 修饰符定义样式

.static {
    width:240px !important;
    height:240px !important;
}

这样，不管怎样，你的宽高都会一直被使用。

【讨论】：