html - 如何在同一个css/div中同时给多个img添加样式

Question

请你帮帮我。您如何定位大量 img 并为所有图像使用相同的 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

假设你不能只给图像添加一个类，你可以使用逗号。

所以像这样:

.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 文件。