Question

我有一个奇怪的情况，我正在努力改进。我的HTML内容在我的网页上显示得很好，但在其他网页上却没有。我在页面中定义了一个样式，我将其应用于<img>标签以限制其宽度，并且效果很好。

我想要的是在我的<img>标签上使用内联CSS，基本上说“嘿，如果我指定的样式不存在，请改为”。有没有办法做到这一点？

（对于那些好奇的人来说，这是为了可以在别处重新发布的内容，我无法控制其他页面上的CSS）

更新

完美，!important规则正是我所需要的。感谢所有回答的人。

Answer 1

的CSS：

img {
    border: solid 2px red !important;
}

HTML：

<img style="border: solid 2px blue;">

img边框颜色为红色，除非样式表不存在，否则默认为蓝色。

参见示例：http://jsfiddle.net/GyR6N/

Answer 2

在这种情况下，将默认样式（在样式表上）设置为重要样式，如下所示：

img {
   border: 3px solid black !important;
}

并应用自定义内联样式：

<img src="foobar" style="border: 1px solid blue;">

你的样式表会覆盖它，但由于它不会存在于不同的网站上，所以它会使用内联样式（除非当然，该网站也恰好有一个重要的规则覆盖你的！）

Answer 3

您可以做的是使用！important标记定义要在CSS中检查的样式，然后在图像标记上添加内联样式。如果样式可用，则！important标记将覆盖图像内联样式。

img.red
{
    background:red !important;
}

<img class="" style="background:blue;" src="" alt="" />
<img class="red" style="background:blue;" src="" alt="" />

除非图像有“红色”类，否则您的页面将使用图像的蓝色背景。

样式不存在时使用内联CSS

3 个答案: