隐藏 parent，如果 parent 缺少特定 class，则显示 child

Question

在我的网站上，我有一个全屏 header，里面有一个导航栏。两者都包含文本、图标等的混合，并出现在“主要内容”部分的上方。我可以将 class .p-X 添加到 #splash 或 #nav （X = 页码，例如第 1 页的 .p-1 （URL INDEX/page/1) 和 .p-2 用于第 2 页 (URL INDEX/page/2))，以便在第 1 页同时显示 #splash 和 #nav，但隐藏 #splash 并且在第 2+ 页上仍然显示 #nav。最有效的方法是什么？ CSS 和 jQuery 解决方案没问题。我试过可见性答案 here and JJJ's selector here（虽然后者可能误用了）。谢谢！

编辑：当前接受的答案不允许我保留#nav 上的弯曲边缘（#splash 的图像和 #nav 之间会有白色 space' s 顶边）。我可以忍受它被移除，但我想知道是否有办法保留它。

#splash {
    width: 100%;
    height: 100vh;
    background:#e00;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.icon {
    width: 128px;
    height: 128px;
    background: #ddd;
    margin: auto 0 0.5rem 0;
}

#splash .info {
    max-width: 700px;
    margin: 0 auto auto auto;
    background: #ddd;
}

#nav {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    justify-content: space-evenly;
    width: 100%;
    height: 40px;
    background: #000;
    color: #fff;
    z-index: 5;
    border-radius: 30% 30% 0% 0%; /* curved top if #splash is shown; curved bottom if not */
}

#content {
    height: 100vh;
    overflow-x: hidden:
    overflow-y: auto;
    background: #ccc;
}

    <section id="splash" class="p-X">
    hide this on pages not 1
        <div class="icon">hide this on pages not 1</div>
        <div class="info">hide this on pages not 1</div>
        <section id="nav">
            sticks to top via JS when #splash is scrolled out/not displayed; display this on every page
        </section>
    </section>
    <section id="content">
        scrollable main content; display new content on different pages
    </section>

Answer 1

设置 #splash 默认隐藏。然后，如果它在第一页上，则将 #splash 设为块元素。

#splash {
    display: none;
}
.p1 #splash {
    display: block;
}

Answer 2

当父元素隐藏时，无法显示元素的子元素。

尝试将#nav 移出#splash，使其不再是#nav 的子元素。然后为了获得相同的外观，在标记中将#nav 放在#splash 之后并使用#nav { background-color: transparent } 这样您就可以看到下面的主要内容，同时使用#splash {height: calc(100vh - HEIGHTOF#NAV)} 使#nav 固定在底部.

在 JS 中设置滚动位置规则以作用于 #nav 而不是 #splash。

现在您可以自由隐藏或显示#splash 部分，而不会影响#nav

隐藏 parent，如果 parent 缺少特定 class，则显示 child

Hide parent, display child if parent lacks specific class

css

visibility