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

最新推荐文章于 2023-03-29 16:26:30 发布

只有一二三

最新推荐文章于 2023-03-29 16:26:30 发布

阅读量542

点赞数

文章标签： css3 css

本文链接：https://blog.csdn.net/qq_41313807/article/details/116497505

版权

发现问题

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

.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;
}