Question

我有一个简单的图像列表，样式看起来像宝丽来图像。

每个图像都会旋转。

a.polaroid {
   transform: rotate(-2deg);
}

在悬停时使用缩放变换。

a.polaroid:hover {
   transform: scale(1.15);
}

此时一切都很好。

但是，添加了一些其他样式以更改某些图像的默认旋转。即所有偶数图像，每第3张图像等。

/* Rotate all even images 2 degrees */
li:nth-child(even) a.polaroid {
   transform: rotate(1deg); 
}

/* Cancel rotation for every 3rd image */
li:nth-child(3n) a.polaroid {
   transform: none;
}

出于某种原因，添加这些样式可防止悬停样式应用于这些样式所针对的任何图像。即每个偶数图像和每个第3个图像。

知道为什么???

请参阅相关小提琴http://jsfiddle.net/46sdd/

更新解决方案的方法是：http://jsfiddle.net/46sdd/3/

Answer 1

选择器specificity（另请参阅MDN） - 您的a.polaroid:hover不够具体，无法覆盖li:nth-child(3n) a.polaroid。解决方案是向前者添加必要的细节，以便它们匹配，并将:hover选择器移到:nth-child个下面：

li:nth-child(3n) a.polaroid
li a.polaroid:hover

为什么nth-child会阻止：hover风格的工作？

1 个答案: