如何在CSS中向元素添加CSS类（而不是使用jQuery或JavaScript）？

Question

我想让网页上的所有图像都具有CSS类“fadeIn”，以便它们第一次出现时会淡入视野中。(我使用CSS动画来执行fadeIn。稍后，我使用jquery添加和删除类。)

通常我会创建一个img元素并使用myImg.addClass("fadeIn")，但该元素在Google Maps代码的深处生成，我无法访问该元素。同时也不确定元素何时实际创建。

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

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

- Eyal

---

我不相信纯CSS可以做到这一点，但是看看SASS或LESS。两者都支持mixin的概念，这可能会让你走得更远。 - vcsjones

CSS 无法实现此功能。您需要使用 JavaScript。 - Diodeus - James MacFarlane

无论在第三方 API 中一个元素被“深度”嵌套多少层，都不重要。当该元素被呈现到页面上时，它就在 DOM 中了，您可以访问它。 - Sven Bieder

如果我们谈论v3 API，那么可以提供一个回调参数，它是一个函数名。这意味着，在我加载、更新、重新渲染、修改地图后，会触发一个事件，而在那里我有我的钩子来访问新创建的元素。 - Sven Bieder

@Sven：我可以访问该元素，但在元素（Google Maps Marker）创建和我操作DOM的代码之间，该元素会在屏幕上闪烁一会儿。我想避免这种闪烁。 - Eyal

Answer 1

据我所知，CSS无法做到这一点。

因此，我的建议是使用类似以下的内容：

img,
.fadeIn
{
    /* styling */
}

现在所有的图像都具有与 .fadeIn 相同的样式。当然，您还需要为样式表中每个使用 .fadeIn 的地方添加 img, 以及任何相关（伪）选择器/类。

- KRyan

---

我的选择器是 "img[src^="da"]" 和 ".fadeIn"。第一个具有更高的特异性，因此它总是会覆盖 fadeIn。通过将 ".fadeIn" 更改为 "img[src^="da"].fadeIn"，现在类可以覆盖前者。 - Eyal

Answer 2

如果您正在使用jQuery来进行淡入操作，您可以想出一个唯一于这些图片的选择器，而不是使用基本的$('.fadeIn')选择器。

因此，如果您正在进行...

$('.fadeIn').fadeIn()

你可能会发现DOM结构中有一些独特的东西，比如那些图片。

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

没有看到你的页面，我无法确定DOM是否足够独特以使其起作用。

- Leslie Hanks

Answer 3

我同意DragoonWraith的观点，如果您真的希望"网页上的所有图像"都具有这种淡入淡出效果，那么您应该能够更通用地针对它们进行定位。但是，如果您需要更具体的定位，请查找路径。我的答案与Leslie Hanks的答案类似（在我完成此答案之前发布），只不过据我了解，您最初并不想使用jQuery，而是使用css过渡效果。因此，如果您需要更具体的定位，请查找路径：

#someGoogleMapId .someDeepContainerClass img {
   /* apply the css transitions */
} 

- ScottS