不同的 CSS 样式行为取决于图像样式答案

【问题标题】：Different CSS style behaviour depending on the image style不同的 CSS 样式行为取决于图像样式
【发布时间】：2026-02-16 15:50:01
【问题描述】：

我有一些图像左对齐或右对齐的文本，由文本包裹。它们的对齐方式在 .html 文件中被硬编码，如下所示：<img style="float:left" ... />。当图像向左对齐时，我想在右边留出一些空间（边距：0 1rem 0 0）。反之亦然，如果图像在右侧，我想在左侧留出一些空间（边距：0 0 0 1rem）。请参阅下面的方案。我需要通过 styles.css 文件中的样式来执行此操作，例如：

figure[style="float: left;"] {
  margin-right: 2rem;
}
figure[style="float: right;"] {
  margin-left: 2rem;
}

请任何人帮助我！

【问题讨论】：

感谢 Ahmad Alfy，问题得以解决。我只需要删除不必要的空格：（float：left->float：left）。另外，艾哈迈德，感谢其他救生员！所以，我们现在可以结束讨论了。

标签： html css css-float

【解决方案1】：

您编写的选择器的问题在于它应该与在 HTML 中编写的方式相同（相同的字母大小写、相同的空格……等等）。

所以根据你写的HTML，你应该修改成如下

figure[style="float:left"] {
  margin-right: 2rem;
}

figure[style="float:right"] {
  margin-left: 2rem;
}

或者你可以使用类似下面的东西

figure[style*="float:left"] {
  margin-right: 2rem;
}

figure[style*="float:right"] {
  margin-left: 2rem;
}

星号表示该样式包含float:left 或float:right 并应用所需的样式。

我想到了一些东西~~但我从未测试过~~它工作正常，我测试过。

figure[style*="float"][style*="left"] {
  margin-right: 2rem;
}

figure[style*="float"][style*="right"] {
  margin-left: 2rem;
}

这应该测试选择器是否包含两种组合（浮动、右或左）。不过没有测试。

【讨论】：

非常感谢，艾哈迈德！你解决了我的问题！我刚刚删除了空格（float：left -> float：left），现在它可以工作了！

【解决方案2】：

你可以做基于属性的选择器，我从来没有尝试过用样式做，但这是个坏主意。即使它有效，它也假定您的标签上没有应用其他样式。这是非常不可靠的。试过了

<!DOCTYPE html>
<html>
<head>
<style>
a[style="color:red;"] {
  background-color: yellow;
}
</style>
</head>
<body>

<p>The link with target="_blank" gets a yellow background:</p>

<a href="https://www.w3schools.com">w3schools.com</a>
<a href="http://www.disney.com" target="_blank" style="color:red;">disney.com</a>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>

</body>
</html>

它似乎在 FireFox 中工作（黄色背景已成功应用）。然而，这是一个非常糟糕的主意，创建这些 CSS 类会更明智：

.fl {
    float: left;
}

.fr {
    float: right;
}

重构您的硬编码样式以使用这些类，然后使用基于类的选择器。因此，您想要实现的目标是可以实现的，但不值得推荐。

【讨论】：

【解决方案3】：

这是一个小问题，您可能没有注意到哪个是分号，因为在 css 文件中，您应该编写与 html 属性中出现的完全相同的 css 选择器，例如：

p[style="color: red;"] {
  background-color: yellow;
}
p[style="color: red"] {
  background-color: green;
}

<p style="color: red;">This will be yellow bg!</p>
<p style="color: red">This will be green bg!</p>

但是正如@Lajos Arpad 在他的回答中提到的那样，这是一个坏主意根据 html 属性来设置 CSS 样式。

【讨论】：

【解决方案4】：

这是我的第一个答案。如果由于某种原因这样的填充不起作用：

div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

否则我会为段落本身添加样式，而不仅仅是图像。

您还可以为不同的图像使用不同的类：

  figure1[style="float: left;"] {
  margin-right: 2rem;
}
figure2[style="float: right;"] {
  margin-left: 2rem;
}

【讨论】：