仅将css样式应用于一个图像

Question

我正在开发一个简单的项目，我有这个后退按钮，通过这一行调用：

<a href="index.html" class="_container">
<img class="image backArrow" src="arrowBackWhite.png">
</a>

然后是它的CSS：

.backArrow {
  display: block;
  height: 100%;
  widt: auto;
  overflow: hidden;
}

然而，我的问题是我有一些css所有其他图像调整大小/响应工作，这是代码：

/* Images */
img {
    max-width: 100%;
    height: auto;
}

我的问题是，backArrow是否可能不会受到imgs CSS的影响？

Answer 1

使用CSS :not选择器：

img:not(.backArrow){
    max-width: 100%;
    height: auto;
}

MDN Definition

Answer 2

我做了以下事情：

img.backArrow {
  display: block;
  height: 100%;
  width: auto;
  overflow: hidden;
}

定位img属性＆amp;类。

Answer 3

CSS采用应用于元素的最后样式，因此我建议始终将最具体的样式置于常规样式之下。

所以你可以先拥有：

img {
    max-width: 100%;
    height: auto;
}

之后：

.backArrow {
    display: block;
    height: 100%;
    width: auto;
    overflow: hidden;
}

因此CSS采用.backArrow样式并覆盖以前使用该类对元素执行的任何样式。 https://jsfiddle.net/m872jj8u/

Answer 4

一般情况：

/* Images */

img {
    max-width: 100%;
    height: auto;
}

独特的图片css如下所示：

.backArrow {
  display: block;
  height: 100%;
  widt: auto;
  overflow: hidden;
}

使用css的not属性：

img:not(.backArrow) {
    max-width: 100%;
    height: auto;
}

这是图像的新通用css，这仅适用于没有名为backArrow的类的图像。