javascript - 如何从 CSS(不是 jquery 或 javascript)向元素添加 CSS 类？

Question

我希望我网页上的所有图片都具有 CSS 类“fadeIn”，这样当它们首次出现时，它们就会淡入视野。 (我正在使用 CSS 动画来做淡入。后来，我使用 jquery 来添加和删除类。)

我通常会创建一个 img 元素并使用 myImg.addClass("fadeIn") 但是该元素是在 Google map 的代码中生成的，我无法访问该元素。 img 元素何时真正创建也是不确定的。

像这样，在 CSS 中:

img {
   height: 100;
   width: 50;
   AddClassToThisElement: "fadeIn"  ***
}

这样的事情可能吗？

编辑:我拥有的实际 CSS 是:

  img[src^="da"] {
    -webkit-animation-name: fadeInFrames;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: normal;
    -webkit-animation-timing-function: linear;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;
  }

  .fadeOut {
    -webkit-animation-name: fadeOutFrames;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: normal;
    -webkit-animation-timing-function: linear;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;
  }

前者更具体，因此向元素添加类 fadeOut 不起作用。通过将 .fadeOut 更改为 img[src^="da"].fadeOut，后者现在更加具体并且可以将 fadeOut 添加到元素中。

Answer 1

据我所知，CSS 不能做到这一点。

那么，我的建议是使用这样的东西:

img,
.fadeIn
{
    /* styling */
}

现在所有图像都具有与 .fadeIn 相同的样式。当然，您还必须为样式表中每次使用 .fadeIn 添加带有任何相关(伪)选择器/类的 img,。