css - 仅当 URL 没有片段标识符时才显示 div

Question

很难解释我的意思，所以先看看这个 jsfiddle：http: //jsfiddle.net/Gsggy/

当用户点击 1 时，显示 1 号 div，其他相同，非常简单。

但是，在用户点击一个数字之前，那里没有 div，因为它依赖于 URL 中的 # 值

如何设置一个带有空白网址的默认 div，例如 www.jsfiddle.com 但是当有人单击一个数字并将其变为 www.jsfiddle.com/#1 时消失

Answer 1

问题是你不能真正以一个元素为目标，告诉它“在其他人是目标时做某事”。

然而，有一些解决方法可以解决这个困境。一种解决方案是始终显示默认内容并显示上面的目标元素。

您可以使用这样一个事实，即 dom 中较晚出现的元素通常呈现在较早出现的节点之上。因此，您可以让例如负上边距或绝对定位元素覆盖您的默认内容。

改进您的 html 结构：

<div class="default" id="z">0</div>
<div id="a">1</div>
<div id="b">2</div>
<div id="c">3</div>

这个 CSS 确实有效：

.default {
    display: block;
    background: #eff;
}

div + div {
    margin-top: -102px;
}

div:target {
    background: #eef;
    display: block;
    position: relative;
}

这种特定方法的缺点是您需要知道默认内容的确切尺寸。

看到这个小提琴：http: //jsfiddle.net/Gsggy/4/

Answer 2

使用 nth-of-type 或 last-of-type 选择器并在最后创建一个默认 div 我认为它适用于您的情况