根据style属性应用CSS是否是不好的做法？

Question

我正在开发一个项目，需要让背景图片居中对齐，于是想到了一个点子。如果我使用一个选择器来判断是否存在 style="background-image: url()"，并添加必要的代码来让图片居中对齐。在 style 属性中添加 CSS 规则似乎是一种非常糟糕的做法，但当我仔细思考后，也许可以在重置文件中使用它。由于选择器不是特别具体，因此很容易被覆盖，并且可以更改所有带有 style="background-image: url()" 的 div 元素的默认背景样式。

我不确定这种方法有多实用，但这种方法是否已经被广泛应用？我是否忽略了任何可能引起问题的因素？也许这不是很现实，但我认为这足以引发讨论。请参见以下示例代码...

div{
  display: block;
  height: 100px;
  width: 100px;
}

[style*=background-image]{
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

<div style="background-image: url(https://istack.dev59.com/RhYGF.webp)"></div>

- Christian J

---

当然是危险的！！ - kukkuz

如果在CSS文件中的规则中指定了背景图像，则此方法将无效。而且这也可能是不必要的。您可以为background-size等指定全局默认值，如果没有背景图像，则它们将没有任何影响。 - user663031

是的，这也是我认为它不实用的原因之一。不过还是很有趣的。 - Jon Doe

Answer 1

我认为这取决于您的项目。您所有的

元素都只用于此目的吗？您所有的背景图像都居中吗？如果是这样，那么可能没问题，但是如果您认为将来会覆盖它们以供项目中的其他元素使用，则在开发应用程序时可能会引起问题。

为什么不尝试这样做：

<div class="center-image" style="background-image: url('https://istack.dev59.com/RhYGF.webp')"></div>

.center-image {
  height: 100px;
  width: 100px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

或者，如果您在一个部分中有多个：

<div class="center-image-wrapper">
   <div style="background-image: url(path-to-img1)"></div>
   <div style="background-image: url(path-to-img2)"></div>
   <div style="background-image: url(path-to-img3)"></div>
</div>

.center-image-wrapper > div {
      height: 100px;
      width: 100px;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
}

此外，需要注意的是，您不需要将display:block应用于

。

已经是块级元素。

- Sammy

---

是的，实际上这就是我最终采用的方法，但我很好奇另一种方法有多有用，因为我以前从未见过这样做。 - Jon Doe

Answer 2

给 div 添加一个类，例如 <div class="myclass">，然后应用以下样式：

.myclass [style*=background-image]

- Nabeel