侄子的 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;
}
我有一系列具有以下 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;
}