使用CSS代码影响除一个图像之外的所有图像

时间:2016-10-20 01:06:14

标签: html css image

我希望在我的网站上影响除一个(可能是两个)以外的所有图像。我有点麻烦搞清楚。

我添加的某些代码是否会影响某些图片?

这是我目前正在使用的代码:

// IMAGE 5 STYLING
#collection-56aa7c3422482efd63ae16e1, #collection-

56aa841e5dc6de4554608778, #collection-55b98395e4b08fff340c1e65,
#collection-5807e5edf7e0abd4e55c38bb{
.sqs-block-image .image-block-wrapper {
height: 150px !important;
width: 150px !important;
margin: 0 auto !important;
padding-bottom: 0px !important;
margin-bottom: 0px !important;
border-radius: 300px !important;
transition: all ease-in-out 600ms !important;
    img {
      height: 150px !important;
      width: 150px !important;
      padding: 0 !important;
      left: 0 !important;
      top: 0 !important;
      border-radius: 300px !important;
    }
}
.image-caption {
text-align: center;
margin-left: 0px !important;
}
.image-caption p strong {
text-transform: uppercase;
color: #555 !important;
color: #555 !important;
border-bottom: solid 1px #ccc;
padding-bottom: 10px;
transition: all ease-in-out 600ms !important;
}
  .sqs-block-image:hover {
  .image-block-wrapper {
 -webkit-transform:rotate(10deg) !important;
    -moz-transform:rotate(10deg);
    -o-transform:rotate(10deg);}
.image-caption strong {
  letter-spacing: 2px;
}
  }}
// END OF IMAGE 5 STYLING

感谢您的帮助:)

2 个答案:

答案 0 :(得分:1)

快速执行此操作的方法是使用css选择器img:not(.not-affected-img),并将.not-affected-img类添加到不应受影响的图像中。

虽然您实际上应该为更改的图像添加一个类:

.image-effect:hover {
  transform: rotate(10deg);
}

答案 1 :(得分:0)

您可以使用:not() CSS pseudo-class不包含元素。例如:

img:not(.dontselect) {
  // styles for all imgs EXCEPT .dontselect
}