css - 子选择器不适用于过渡

Question

我遇到了类似以下的问题:

<div class="mydiv"> 
     <p>hi</p> 
     <h4>hello</h4>
 </div> 

当我将以下 css 应用于上面的 html 时，它会起作用。颜色变红了。

.mydiv:hover > p{
     color:red
}

但是当我应用以下 css 时它不起作用。问题是什么:

.mydiv{
  transition: all 1s;
}
.mydiv:hover > p{
     transform:rotate(90deg);
}

Answer 1

您正在将 transition: all 1s 应用到 div，而不是您正在应用转换的 p 元素 - 您可以通过定位 .myDiv > p 而不是 .myDiv

来解决这个问题

如果您尝试内联旋转文本，则需要将 width 应用于 p 标记，并更改 :hover 也会影响 p 标签

.mydiv > p {
  width: 1em;
  transition: all 1s;
}

.mydiv > p:hover {
  transform: rotate(90deg);
}

<div class="mydiv">
  <p>hi</p>
  <h4>hello</h4>
</div>