css - 将 CSS 样式设置为具有特定样式的元素

Question

我的内容中有很多带有预设样式的图像，例如<img src="" style="float:left">或<img src="" style="float:right">

我想根据它们的浮动方式为它们设置不同的边距。是否可以为具有预设样式的图像设置 CSS 样式？

谢谢！

Answer 1

严格来说，您所追求的（CSS3）选择器是属性包含选择器：

img[style*="float:left;"] { margin: ; }
img[style*="float:right;"] { margin: ; }

与李斯特先生的回答不同，即使元素具有其他内联样式，它也会起作用。也就是说，我更喜欢 Lollero 的使用类并以这种方式应用你的利润的答案；它将与浏览器 100% 兼容！

Answer 2

我不知道你为什么要这样做，所以我要建议这个：

http://jsfiddle.net/ZDjWT/

HTML：

<img class="left" src="http://lorempixel.com/g/200/100/" alt="" />
<img class="right" src="http://lorempixel.com/g/200/100/" alt="" />

CSS：

.left {
    float: left;
    margin-left: 30px;
}
.right {
    float: right;
    margin-right: 30px;
}

Answer 3

是的，只要样式仅"float:left"包含且不包含其他属性或冒号周围的空格，您就可以img[style='float:left']在 CSS 中编写。

如果 style 属性也可以包含其他内容，则最好使用 Javascript 添加属性。（检查.. .style.float）

编辑：正如 Pekka 所说，CSS 并不适用于所有浏览器。毕竟，为图像添加一个类可能是更好的主意！