如何将CSS类添加到CSS中的元素（而不是jQuery或JavaScript）？

我希望我的网页上的所有图像具有CSS类“淡入”，以便当它们第一次出现时，它们将淡入视图。（我使用CSS动画做fadeIn。后来，我用jquery添加和删除类。）如何将CSS类添加到CSS中的元素（而不是jQuery或JavaScript）？

我会正常制作一个img元素并使用myImg.addClass("fadeIn")，但元素是在Google地图和我无权访问元素。还不确定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添加到元素中。

来源

2012-07-30 Eyal

我不相信纯CSS可以做到这一点，但看看[SASS（http://sass-lang.com/）或[更少]（http://lesscss.org/）。两者都支持mixin的想法，这可能会让你成为那里的一部分。 – vcsjones 2012-07-30 17:33:20

CSS无法做到这一点。你需要使用JavaScript。 – 2012-07-30 17:33:35

SASS和LESS是幕后的JavaScript。我想不出有什么办法可以做到不涉及JS。 – Utkanos 2012-07-30 17:34:04

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

我的建议的话，就是用这样的：

img, 
.fadeIn 
{ 
    /* styling */ 
}

现在，所有的图像具有相同的造型为.fadeIn。当然，您还必须在样式表中为.fadeIn的每次使用添加img,以及任何相关（伪）选择器/类。

来源

2012-07-30 17:36:08 KRyan

我的选择器是“img [src^=”da“]”和“.fadeIn”。第一个有更高的特异性，所以它总是超过淡入淡出。通过将“.fadeIn”改为“img [src^=”da“] .fadeIn”，该类现在可以覆盖前者。 – Eyal 2012-07-30 18:15:37

如果您使用jQuery进行淡入，您可能会想出一个对这些图像来说是唯一的选择器，而不是使用基本的$（'。fadeIn'）选择器。

所以，如果你正在做

$('.fadeIn').fadeIn()

你可能会发现有东西在DOM结构所特有的那些相似图片

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

没有看到你的页面我不能说如果DOM有足够的独特性来完成这项工作。

来源

2012-07-30 17:38:36

我同意DragoonWraith的观点，如果你真的想让“我的网页上的所有图片”具有这种淡入淡出效果，那么你应该能够更一般地定位它们。但是，如果你需要更多的特异性，找出路径。我的回答类似于Leslie Hanks（在我完成之前发布的），除非我明白，您最初不想使用jQuery，而是使用css过渡。所以，如果你需要更多的特异性，找出路径：

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

来源

2012-07-30 17:43:39 ScottS

如何将CSS类添加到CSS中的元素（而不是jQuery或JavaScript）？

回答

相关问题