Html 仅css，仅在第一次访问页面时显示div

我已经设置了一些名为

#a1

，

#a2

<代码>#a100

我需要隐藏和显示基于链接的div。问题是始终显示原始div（

#a1

）

这是一种工作，小提琴

代码：

在选择另一个

div

之后，如何摆脱它

没有JavaScript是可能的，因为它用于电子书阅读器，并且不执行JS。

这对您有帮助吗？

1.
第一内容

还有一些东西

还有更多的东西

2.
第二

3.
第三

4.
第四内容

此解决方案并不完美，但它允许您在默认情况下显示第一个div。它的工作原理是始终显示第一个div，并且仅在选中时才在第一个div的顶部显示其他div。根据内容的动态程度，如果无法明确定义位置或大小，可能会导致边缘出血问题

div（：目标）{
显示：块；
}
div:not（：target）{
显示：无；
}
div{
位置：绝对；/*以便将div分层*/
top:40px；/*它们都需要在同一个位置*/
左：10px；
背景色：#fff；/*他们需要某种背景*/
高度：100px；
}
#a1{
显示：阻止！重要；/*使第一个始终可见*/
}

||
第一节
Lorem ipsum dolor set amet

第二节
这有更多的文字

第三节
这是一段

使用jsFiddle的TidyUp函数，它在可读性方面发挥了神奇的作用。当你看到红色标签时，你也会看到它。这意味着您的HTML结构缺少一些结束标记。。。请你提供正确的HTML代码…这个“东西”根本不起作用，首先当你加载页面时，你看不到第3部分。。。然后，当你点击一个链接时，你会看到3，但1仍然存在。正如我所知，您需要JavaScription，您是否能够控制用户访问页面的方式？如果用户单击某个链接访问此页面，您可以让该链接转到

index.html#a1

，而不仅仅是

index.html

（例如）。谢谢，默认情况下是否有办法显示数字1，或者用户必须单击它？

#a1{display:block；}

可以工作，但始终可见谢谢，我将使用第一页的链接。谢谢，不幸的是，内容没有设置为预定义的高度，因此会出现一些重叠。

 #a1 {
    display:block;
}
div:not(:target) {
    display: none
}
div(:target) {
    display: block
}

<a name="1" href="#a1">1</a> 
<a name="2" href="#a2">2</a> 
<a name="3" href="#a3">3</a> 
<a name="4" href="#a4">4</a> 

<div id="a1" class="hide-not-target">
    <h1>1</h1>
    <p>1st content<br/>
    with some more stuff<br/>
    and some more stuff</p>
</div>

<div id="a2" class="hide-not-target">
    <h1>2</h1>
    <p>2nd</p>
</div>

<div id="a3" class="hide-not-target">
    <h1>3</h1>
    <p>3rd</p>
</div>

<div id="a4" class="hide-not-target">
    <h1>4</h1>
    <p>4th content</p>
</div>