如何在css中使用相邻的兄弟选择器

Question

这是我的HTML代码：

<div id="main">
    <h1>
        <div class="details-of-family-members">Details of Family Members</div>
    </h1>
    <div class="wrap data">
        <h1> Hello</h1>
    </div>
</div>

以下是基于 h1 内的类.wrap.data的 div 隐藏.details-of-family-members div 的CSS

Answer 1

在CSS3中，没有根据子项选择父项的选项。

我们得到了这个结论：h1是.wrap.data的兄弟，而不是details-of-family-members。

因此，您应该将课程details-of-family-members添加到h1标记。然后你可以：

.details-of-family-members + .wrap.data {
    display:none;
}

.details-of-family-members + .wrap.data{
  display:none;
}

<div id="main">
    <h1  class="details-of-family-members">
        <div>Details of Family Members</div>
    </h1>
    <div class="wrap data">
        <h1> Hello</h1>
    </div>
</div>

Answer 2

尝试此操作，您无法通过css

基于子节点来定位父节点

#main h1:hover + .wrap.data {display:none;}