如何从CSS（不是jquery或javascript）向元素添加CSS类？

我希望我的网页上的所有图像都有CSS类“fadeIn”，这样当它们第一次出现时，它们将淡入视图。（我正在使用CSS动画进行fadeIn。稍后，我将使用jquery添加和删除该类。）

我通常会制作一个img元素并使用

myImg.addClass（“fadeIn”）

，但该元素是在谷歌地图的代码中制作的，我无法访问该元素。还不确定何时实际创建

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

更改为

img[src^=“da”].fadeOut

，后者现在更加具体，并将fadeOut添加到元素中。据我所知，CSS无法做到这一点

那么，我的建议是使用以下内容：

img,
.fadeIn
{
    /* styling */
}

---

现在，所有图像的样式都与

.fadeIn

相同。当然，您还必须在样式表中为每次使用

.fadeIn

添加

img、

和任何相关的（伪）选择器/类。

如果您使用jQuery进行淡入，您可能能够找到这些图像特有的选择器，而不是使用基本的$（'.fadeIn'）选择器

所以如果你正在做

$('.fadeIn').fadeIn()

您可能会发现DOM结构中有一些东西是这些图像所独有的，比如

$('#SomeMapId div#SomeContainerId IMG').fadeIn()

---

如果没有看到你的页面，我就说不出DOM是否足够独特，可以实现这一点。

我同意龙骑士的观点，如果你真的希望“我网页上的所有图像”都有这种淡入淡出效果，那么你应该能够更一般地针对它们。但是，如果您需要更具体的信息，请找出路径。我的答案与Leslie Hanks（在我完成这篇文章之前，她发表了文章）类似，只是我理解，您最初并不希望使用jQuery，而是希望使用css转换。因此，如果您需要更多的特殊性，请找出路径：

#一些谷歌地图。一些DeepContainerClass img{
/*应用css转换*/
} 

我不相信纯CSS可以做到这一点，但请看一下或。两者都支持mixin的思想，这可能会让你在其中找到一部分。CSS无法做到这一点。您需要使用JavaScript.SASS，而幕后的JavaScript就更少了。我想不出任何不涉及JS的方法来实现这一点。在第三方API中，元素的“深度”完全不重要。当元素呈现到页面时，它就在dom中，您可以访问它。这意味着在我加载、更新、重新渲染、修改（或你做的任何事情）地图之后，我会触发一个事件，在那里我有一个新创建元素的挂钩。我的选择器是“img[src^=“da”]”和“.fadeIn”。第一个具有更高的特异性，因此它总是超越fadeIn。通过将“.fadeIn”更改为“img[src^=“da”].fadeIn”，类现在可以覆盖前者。