子选择器不适用于转换

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标签