【问题标题】:CSS Select Images with style="float:left" possible?CSS选择样式=“float:left”的图像可能吗?
【发布时间】:2011-04-12 10:32:39
【问题描述】:

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

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

谢谢。

【问题讨论】:

  • 是什么将它们设置为float: left?那不也可以将左边距和下边距设置为0吗?
  • 这是一个用于执行此操作的 CMS 界面,对于某些用户来说设置边距有点复杂。另外 CMS 界面只允许设置水平。和垂直。同时边际。所以两个两个不是每个。

标签: css image css-selectors css-float


【解决方案1】:

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

【讨论】:

  • 它们是用户通过 CMS 放置的图像。
【解决方案2】:

使用这个:

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

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

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

【讨论】:

  • 如果浮动不在 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,还是仅适用于内联?
猜你喜欢
  • 2011-09-11
  • 2011-08-02
  • 1970-01-01
  • 2010-12-31
  • 1970-01-01
  • 2020-10-28
  • 2014-08-09
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多