博客

发现问题

在一次练习中，我设置了如下代码：

.box img:hover {
  transform: scale(1.5,1.5);
  z-index: 1;
}
.box img:nth-child(1) {
    position: absolute;
    top: 150px;
    left: 300px;
    transform: rotate(45deg);
}

这里我设置了两次transform，但最后效果里，:hover里的scale并未生效

思路

考虑到是否是优先级的问题，我将两个样式调换了一下顺序，就成功了

.box img:nth-child(1) {
    position: absolute;
    top: 150px;
    left: 300px;
    transform: rotate(45deg);
}
.box img:hover {
  transform: scale(1.5,1.5);
  z-index: 1;
}

总结

“nth-child”选择器的优先级高于伪类选择器“:hover”