如何將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）？

回答

相關問題