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

问题描述

我有一些文字，图像左对齐或右对齐，由文字包裹。它们的对齐方式硬编码在 .html 文件中，如下所示：document。当图像左对齐时，我想在右边有一些空间（边距：0 1rem 0 0）。反之亦然，如果图像在右侧，我希望左侧有一些空间（边距：0 0 0 1rem）。请参阅下面的方案。我需要通过styles.css文件中的样式来做到这一点，例如：

<img style="float:left" ... />

请任何人帮助我！

解决方法

您编写的选择器的问题在于它应该与用 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;
}

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

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

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

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

这是一个小问题，您可能没有注意到哪个是分号，因为在 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 样式是一个坏主意。

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

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