如何在同一個css/div中同時添加樣式到多個img

Question

請幫助我。你如何定位大量的imgs，併爲所有人使用相同的CSS，而不是像我一樣單獨完成它們。基本上，按照順序排列.jpg文件的正確語法是什麼。感謝您的幫助和時間！

<style> 
/*Image hover*/ 

.wsite-image-border-none img[src="/uploads/4/1/3/2/41323535/published/h4.png?1489059309"]{ 
    -webit-transition: -webkit-transform .7s ease !important; 
    -moz-transition: -moz-transform .7s ease !important; 
    -ms-transition: -ms-transform .7s ease !important; 
    -o-transition: -o-transform .7s ease !important; 
    transition: transform .7s ease !important; 
    -webkit-transform: scale(.9) !important; 
    -moz-transform: scale(.9) !important; 
    -ms-transform: scale(.9) !important; 
    -o-transform: scale(.9) !important; 
    transform: scale(.9) !important; 
} 

.wsite-image-border-none img[src="/uploads/4/1/3/2/41323535/published/h4.png?1489059309"]:hover{ 
    -webkit-transform:scale(1) !important; 
    -moz-transform:scale(1) !important; 
    -ms-transform:scale(1) !important; 
    -o-transform:scale(1) !important; 
    transform:scale(1) !important; 
} 

    .wsite-image-border-none img[src="/uploads/4/1/3/2/41323535/h2_orig.png"]{ 
    -webit-transition: -webkit-transform .7s ease !important; 
    -moz-transition: -moz-transform .7s ease !important; 
    -ms-transition: -ms-transform .7s ease !important; 
    -o-transition: -o-transform .7s ease !important; 
    transition: transform .7s ease !important; 
    -webkit-transform: scale(.9) !important; 
    -moz-transform: scale(.9) !important; 
    -ms-transform: scale(.9) !important; 
    -o-transform: scale(.9) !important; 
    transform: scale(.9) !important; 
} 

.wsite-image-border-none img[src="/uploads/4/1/3/2/41323535/h2_orig.png"]:hover{ 
    -webkit-transform:scale(1) !important; 
    -moz-transform:scale(1) !important; 
    -ms-transform:scale(1) !important; 
    -o-transform:scale(1) !important; 
    transform:scale(1) !important; 
} 


     .wsite-image-border-none img[src="/uploads/4/1/3/2/41323535/h1_orig.png"]{ 
    -webit-transition: -webkit-transform .7s ease !important; 
    -moz-transition: -moz-transform .7s ease !important; 
    -ms-transition: -ms-transform .7s ease !important; 
    -o-transition: -o-transform .7s ease !important; 
    transition: transform .7s ease !important; 
    -webkit-transform: scale(.9) !important; 
    -moz-transform: scale(.9) !important; 
    -ms-transform: scale(.9) !important; 
    -o-transform: scale(.9) !important; 
    transform: scale(.9) !important; 
} 

.wsite-image-border-none img[src="/uploads/4/1/3/2/41323535/h1_orig.png"]:hover{ 
    -webkit-transform:scale(1) !important; 
    -moz-transform:scale(1) !important; 
    -ms-transform:scale(1) !important; 
    -o-transform:scale(1) !important; 
    transform:scale(1) !important; 
} 


    .wsite-image-border-none img[src="/uploads/4/1/3/2/41323535/h3_orig.png"]{ 
    -webit-transition: -webkit-transform .7s ease !important; 
    -moz-transition: -moz-transform .7s ease !important; 
    -ms-transition: -ms-transform .7s ease !important; 
    -o-transition: -o-transform .7s ease !important; 
    transition: transform .7s ease !important; 
    -webkit-transform: scale(.9) !important; 
    -moz-transform: scale(.9) !important; 
    -ms-transform: scale(.9) !important; 
    -o-transform: scale(.9) !important; 
    transform: scale(.9) !important; 
} 

.wsite-image-border-none img[src="/uploads/4/1/3/2/41323535/h3_orig.png"]:hover{ 
    -webkit-transform:scale(1) !important; 
    -moz-transform:scale(1) !important; 
    -ms-transform:scale(1) !important; 
    -o-transform:scale(1) !important; 
    transform:scale(1) !important; 
} 




</style> 

嚴峻的建議：

<style> 
/*Image hover*/ 

.wsite-image-border-none img[src="/uploads/4/1/3/2/41323535/published/h4.png?1489059309"], .wsite-image-border-none img[src="/uploads/4/1/3/2/41323535/h2_orig.png"], .wsite-image-border-none img[src="/uploads/4/1/3/2/41323535/h1_orig.png"], .wsite-image-border-none img[src="/uploads/4/1/3/2/41323535/h3_orig.png"], { 
    -webit-transition: -webkit-transform .7s ease !important; 
    -moz-transition: -moz-transform .7s ease !important; 
    -ms-transition: -ms-transform .7s ease !important; 
    -o-transition: -o-transform .7s ease !important; 
    transition: transform .7s ease !important; 
    -webkit-transform: scale(.9) !important; 
    -moz-transform: scale(.9) !important; 
    -ms-transform: scale(.9) !important; 
    -o-transform: scale(.9) !important; 
    transform: scale(.9) !important; 
} 

.wsite-image-border-none img[src="/uploads/4/1/3/2/41323535/published/h4.png?1489059309"], .wsite-image-border-none img[src="/uploads/4/1/3/2/41323535/h2_orig.png"], .wsite-image-border-none img[src="/uploads/4/1/3/2/41323535/h1_orig.png"], .wsite-image-border-none img[src="/uploads/4/1/3/2/41323535/h3_orig.png"]:hover { 
    -webkit-transform:scale(1) !important; 
    -moz-transform:scale(1) !important; 
    -ms-transform:scale(1) !important; 
    -o-transform:scale(1) !important; 
    transform:scale(1) !important; 
} 

</style> 

不知道什麼我在想念

Answer 1

Assiming你不能只是一個類添加到圖像時，可以使用逗號。

因此，像：

.wsite-image-border-none img[src="/uploads/4/1/3/2/41323535/published/h4.png?1489059309"], .wsite-image-border-none img[src="/uploads/4/1/3/2/41323535/h2_orig.png"], .wsite-image-border-none img[src="/uploads/4/1/3/2/41323535/h3_orig.png"] { 
     -webit-transition: -webkit-transform .7s ease !important; 
     -moz-transition: -moz-transform .7s ease !important; 
     -ms-transition: -ms-transform .7s ease !important; 
     -o-transition: -o-transform .7s ease !important; 
     transition: transform .7s ease !important; 
     -webkit-transform: scale(.9) !important; 
     -moz-transform: scale(.9) !important; 
     -ms-transform: scale(.9) !important; 
     -o-transform: scale(.9) !important; 
     transform: scale(.9) !important; 
    } 

或者更好的是，考慮使用像SCSS東西創建CSS文件給你。