CSS选择样式=“float:left”的图像可能吗？

Posted 2023-03-06

【中文标题】CSS选择样式=“float:left”的图像可能吗？

【英文标题】：CSS Select Images with style="float:left" possible?

【发布时间】：2011-04-12 10:32:39

【问题描述】：

与选择img[title="test"] 类似，我能否以某种方式选择样式属性为float 设置为left 的图像？

我想为它们设置不适用于右浮动图像的左右边距。

谢谢。

【问题讨论】：

是什么将它们设置为float: left？那不也可以将左边距和下边距设置为0吗？

这是一个用于执行此操作的 CMS 界面，对于某些用户来说设置边距有点复杂。另外 CMS 界面只允许设置水平。和垂直。同时边际。所以两个两个不是每个。

【参考方案1】：

没有 JS 是不可能的。不过，您可以在图像或其父级上设置一个类并制定规则。

【讨论】：

它们是用户通过 CMS 放置的图像。

【参考方案2】：

使用这个：

img[style~="float:left"] 
  margin: 5px 15px 0px 0px;


img[style~="float:right"] 
  margin: 5px 0px 0px 15px;

您可以在以下网站之一阅读所有有关 CSS2 选择器的信息：

CSS2 attr selector examples at quirksmode CSS2 attr selector reference from w3.org

【讨论】：

如果浮动不在 CSS 文件和内联样式标签中，这将起作用。

如果它在 CSS 文件中，您可以编辑类，并且可能不需要这个问题。

【参考方案3】：

Peter W 解决方案需要这样修复：（将 ~= 更改为 *= ）

img[style*="float:left"] 
  margin: 5px 15px 0px 0px;


img[style*="float:right"] 
  margin: 5px 0px 0px 15px;

唯一的问题是它完全匹配，所以float:right 会匹配，而float: right 不会（注意额外的空格）。

我在 Chrome 和 IE9 中测试成功，但是在 IE emulation 模式下无法工作...

【讨论】：

对排版样式很有帮助！

【参考方案4】：

只是稍微扩展一下，这是我一直用于所有图像的内容。它捕获浮动以及对齐的图像。

img[align="left"],
img[style*="float: left"],
img[style*="float:left"]
    margin: 5px 15px 0px 0px;

img[align="right"],
img[style*="float: right"],
img[style*="float:right"]
    margin: 5px 0px 0px 15px;

【讨论】：

没问题。我喜欢它背后的想法，但一开始并没有奏效。我认为其他人可能不会花太多时间来调试它......

这是最好的通用解决方案，非常适合具有所见即所得内嵌图像的 CMS 系统。

使用内联样式和 CSS 压缩（例如，打开 Drupal 的“聚合和压缩 CSS 文件”）可能会有点危险。空格将从第一条规则中删除，实质上是复制规则。如果用户在内容正文中添加的任何内联样式有空格，则它们将不再匹配，您对此无能为力。

空白被剥离实际上是 Drupal 的 CSS 压缩器中的一个错误。我在 D7 中为它写了一个补丁，而 D8 目前正在进行中。

这适用于来自样式表的 CSS，还是仅适用于内联？