Html 更改父悬停时子元素的CSS类

我的Html：

<div class="parent">
 <span class= "child"></span>
</div>

---

我想在将鼠标悬停在父元素上时更改子span标记的CSS，并在鼠标悬停在父元素上时恢复子元素的CSS。如何使用CSS和HTML实现这一点？

.parent:hover.child{some props}

尝试以下方法：

在css:hover中使用normal伪元素，添加子元素.child来添加他的样式

.parent:hover .child{ 
       background-color:red; 
      }