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

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

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

不知道什麼我在想念

來源

2017-03-09 Limtu

使用相同的'類'所有 –

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文件給你。

來源

2017-03-09 12:07:25

Thankyou爲您的時間。是的，你是正確的我不能添加類是通常做的，但它是一個CMS。我使用了你給我的建議，但還沒有工作。我確定我的逗號不合適。謝謝！ – Limtu

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

回答

相關問題