html - Basic CSS : When applying effects to images in CSS, 如何排除横幅图片？

Question

我有一段 CSS，当你将鼠标悬停在图像上时，它会导致图像弹出一点:

a img 
{
    -webkit-transition: -webkit-transform 0.3s ease;
    -moz-transition: -moz-transform 0.3s ease;
    -o-transition: -o-transform 0.3s ease;
    transition: transform 0.3s ease;
}

a:hover img 
{
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);

    -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
    -o-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
}

问题是这适用于所有图像，包括我的横幅。无论如何要排除横幅图片？

Answer 1

如果您可以使用类或 ID 引用该横幅图片，并且您可以拒绝 IE8 用户，那么 CSS3 选择器 :not() 可能会产生奇迹。

A jsfiddle for you to look at .
An update to the above Fiddle that's a bit more complex .

除了 IE8，every other major browser, and IE9 ，对此给予支持。假设 this site，Firefox 和 Safari 的支持可以追溯到版本 1是正确的。