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

指示您不能只为图像添加课程，您可以使用逗号。

类似于：

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

如何在同一个css / div中为多个img添加样式

1 个答案: