发现问题
在一次练习中,我设置了如下代码:
.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”