侄子的 css 选择器是什么?

What is the css selector for a nephew?

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

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

with .hoverArea, .caption, .image { position: absolute; }

当用户将鼠标悬停在 'hoverArea' 上时,(同级)图像会放大:

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

效果很好,但我现在需要将图像放入 parent/wrapper

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

侄子需要什么选择器? 我以为只是:

.hoverArea:hover .image { 宽度:300px; }

.wrap.hoverArea:hover .parent.image { ... }

但是这些好像都不管用。

如果我添加带有“::before”的父级,会有什么不同吗?

试试这个

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

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