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

Question

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

当用户单击1时，div编号1就会显示出来，其他的也一样，非常简单。

然而，在用户点击数字之前，这里没有div，因为它依赖于URL 中的#值

我如何设置一个默认的div，它有一个空白的url，例如www.jsfiddle.com，但当有人点击一个数字并使其成为www.jsfiidle.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

使用类型选择器的第n个或类型选择器的最后一个，并在最后一个中设置默认div我认为它在您的情况下会起作用