Question

我的情况是css中有预定义样式的图像，如下所示：

<html>
<head>
<STYLE TYPE="text/css">
   #content img  {
    -moz-box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
    -webkit-box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
    -box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
   }
</STYLE>
</head>
<body bgcolor="#dddddd">
   <div id="content">
       <img src="image.gif" />
   </div>
</body>
</html>

对于页面内的大多数图像，没关系，但在某些情况下，我希望显示没有预定义样式的图像。有可能吗？也许是内联风格？

Answer 1

有很多方法可以做到这一点。如您所述，内联样式是一种选择。还有其他人。你应该读一下css优先级。

一个可能的链接（谷歌的第一个结果，一般不知道这个网站，但文章看起来没问题）：

http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/

Answer 2

您可以为不希望拥有此样式的图像添加类。

#content img.noshadow{
  -moz-box-shadow: 0;
  -webkit-box-shadow: 0;
  box-shadow: 0;
}

然后在您的图像中<img class="noshadow" src="image.gif" />

Answer 3

制作更具体的CSS选择器：

body #content img  {
    ...
}

Answer 4

在这种情况下，您可以定义内联样式。如下图所示。

 <img src="image.gif" height="" width="" ... />

希望这可以帮助你!!

覆盖预定义的CSS样式

4 个答案: