侄子的css选择器是什么？

Question

我有一系列具有以下 html 格式的元素：

<div class="wrap">
   <div class="hoverArea"> ... </div>
   <div class="caption"> ... </div>
   <div class="image"> ... </div>
</div>

与 .hoverArea、.caption、.image { 位置：绝对；}

当用户将鼠标悬停在“hoverArea”上时，（兄弟）图像会放大：

.hoverArea：悬停〜.image {宽度：300px; }

这工作正常，但我现在需要将图像放入父级/包装器中

<div class="wrap">
   <div class="hoverArea"> ... </div>
   <div class="caption"> ... </div>
   <div class="parent">
      <div class="image"> ... </div>
   </div>   
</div>

我需要为侄子选择什么选择器？我以为这只是：

.hoverArea：悬停.image { 宽度：300px; }

或者

.wrap.hoverArea:悬停 .parent.image { ... }

但这些似乎都不起作用。

如果我在父级上添加 '::before' 会有什么不同吗？

Answer 1

尝试这个

~: 对于兄弟选择器
>: 对于子选择器
在句子中，.hoverArea的兄弟是.parent，它的孩子是.image

.hoverArea:hover ~ .parent > .image{
  width: 300px;
}