CSS：在父母悬停时更改孩子（仅限单个孩子）

Question

我可以改变父母悬停的孩子：

.parent：hover .child {...}

问题是，这会改变文档中的所有孩子。

（我在页面上使用父10x =＆gt;它将更改所有这些父级中的子项）

是否有CSS方式，如何仅更改父母的孩子，我目前正在盘旋？

示例：

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

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

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

如果我将鼠标悬停在第一个.parent上，我希望更改其.child。但我提到的解决方案会影响所有孩子。

Answer 1

您需要使用“＆gt;”直接选择孩子或“相邻的兄弟组合者”

.parent:hover > .child{
  background: red;
}

<div class="parent">
   <p class="child">child one</p>
</div>

<div class="parent">
   <p class="child">child two</p>
</div>

<div class="parent">
   <p class="child">child three</p>
</div>