【发布时间】：2012-02-04 11:36:26
【问题描述】：
我的内容中有很多预设样式的图像，例如 <img src="" style="float:left"> 或 <img src="" style="float:right">
我想根据它们的浮动方式为它们设置不同的边距。是否可以为带有预设样式的图片设置 CSS 样式？
谢谢！
【问题讨论】：
【发布时间】：2012-02-04 11:36:26
【问题描述】：
严格来说，您所追求的 (CSS3) 选择器是 attribute contains 选择器：
img[style*="float:left;"] { margin: ; }
img[style*="float:right;"] { margin: ; }
与李斯特先生的回答不同，即使元素具有其他内联样式，它也会起作用。也就是说，我更喜欢 Lollero 的使用类并以这种方式应用你的利润的答案；它将与浏览器 100% 兼容！
【讨论】：
-
我觉得这很奇怪，因为这个例子有分号，原来的问题没有！但是好吧，我被打败了。
-
@MrLister 我假设示例中显示的代码是一个演示，实际使用的代码必须按照标准使用分号:)
-
注意最后不需要分号；分号是属性分隔符，而不是终止符。
-
@MrLister 确实，这不是必需的，但它是“规范”，如果您愿意的话，这是一个事实上的标准。这种情况是一个完美的例子，为什么：如果分号没有包含在 css 规则的末尾，那么下面的代码将不会与上面的属性选择器匹配：
style="width:300px; float:right"。诚然，在这种情况下它没有区别，因为分号可以从选择器中删除，尽管如果您使用诸如 repeat 和 repeat-x 之类的属性可能会。当您遇到此类情况时，始终如一地编写 CSS 会很有帮助！
我不知道你为什么要那样做，所以我要建议这个：
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;
}
【讨论】：
-
已经用style="float:left"设置的图片太多了，没机会全部改掉。只是想弄清楚如何自动制作它。
-
@OlegsKrisons 如果你有一个不错的编辑器，你可以替换所有的东西，例如：
style="float:left"用class="left"这当然假设你的代码和你的例子一样简单在问题中. （当然，在替换东西时，您可能想要制作钩子，这样您就可以确定您正在替换您需要的东西......就像style="float: left;" alt="替换为class="left" alt="） -
@OlegsKrisons 如果您想要最大程度的浏览器兼容性，那么这就是要走的路。替换所有作品奇迹......（upped）
是的，只要样式只有"float:left" 并且不包含其他属性或冒号周围的空格，您就可以在CSS 中写img[style='float:left']。
如果样式属性也可以包含其他内容，则最好使用 Javascript 来添加属性。 （检查.. .style.float）
编辑：正如 Pekka 所说，CSS 并不适用于所有浏览器。或许为图像添加一个类毕竟是更好的主意！
【讨论】：
-
正如你所说，这非常非常不稳定，因为
style属性必须完全匹配；此外，IE7 也不支持此功能（尽管谢天谢地，这已成为一个越来越少的问题。） -
@Pekka：你的意思是 IE7 的属性选择器和
style属性有问题吗？我听说它混淆了属性和属性，但我不确定到底是什么。 -
@BoltClock 哦，我错了——我认为 IE7 根本不支持属性选择器，但事实并非如此。李斯特先生，我的立场是正确的！所以只有 IE6 不支持这一点 - 我想说，我们现在可以忽略。
-
@Pekka：AFAIK，IE7 支持 CSS2 和 CSS3 中的所有属性选择器，除了我提到的属性/属性怪癖。
-
是的，我也知道IE7有很多CSS问题，用IE8解决了。我不记得哪些具体的（所以我把你的话放在了表面上），但我现在无法测试；我在家并在Linux下运行。不过，我可以在我回去工作时做一些检查。