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

Question

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

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

请任何人帮助我！

Answer 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;
}

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

Answer 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 classes:

会更明智

.fl {
    float: left;
}

.fr {
    float: right;
}

重构您的硬编码样式以改用这些 classes，然后使用基于 class 的选择器。所以，你想实现的东西是可以实现的，但不值得推荐。

Answer 3

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

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;
}

Answer 4

这是一个你可能没有注意到的小问题分号，因为在css文件中你应该写出准确的css选择器在 html 属性中，参见下面的示例：

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 样式行为取决于图像样式

Different CSS style behaviour depending on the image style

html

css

css-float