Html 显示节/div取决于链接中的后散列值

我有下一页

部分{
高度：1000px；
背景：黄色；
利润率：50像素；
}

第一节
第二节

您可以研究伪类的使用，但是当URL哈希为空时，您可能很难显示所有节

例如：

section:not（：target）{display:none；}
节：目标{显示：块}

第一节
第二节可能JavaScript是最好的方法，但是如果你真的不想使用它，你可以使用BenM建议的
：target
方法和复制HTML

如果没有
：target
，则显示重复的HTML。当有目标时，显示目标并隐藏其他所有内容

像这样：


#一，
#两个{
显示：无；
}
#一,目标,，
#二：目标{
显示：块；
}
#一：目标~div，
#二：目标~div{
显示：无；
}

第一节
第二节
第一节
第二节
我的解决方案不包含HTML嵌套，并且易于扩展。它使用
：target
和查找匹配项并仅显示targeted
部分


/*最初显示所有部分*/
部分{
高度：1000px；
背景：黄色；
利润率：50像素；
}
/*最初隐藏所有目标部分*/
跨度：目标截面{
显示：无；
}
/*仅显示目标节*/
跨度：第n个类型（1）：目标截面：第n个类型（1），
跨度：第n个类型（2）：目标截面：第n个类型（2），
跨度：第n个类型（3）：目标截面：第n个类型（3），
跨度：第n个类型（4）：目标截面：第n个类型（4），
跨度：第n个类型（5）：目标截面：第n个类型（5）{
显示：块；
}

第一节
第二节
第三节
第四节
第五节
我认为您必须使用js/jqueryduplicate of？它可以与任意数量的sections@TemaniAfif无限嵌套…这个解决方案并不比我们在这里提出的任何方案都好。和这里的解决方案一样，您的CSS必须随着DOM的更改而修改。@实际上，这是我看到的唯一一个可以处理多个部分而不复制内容的解决方案；）[顺便说一句，我从来没有说过这更好，这可能是重复的，因为问题几乎是一样的，不说完全一样]@Temaniaff如果是的话，这个问题是最重复的，但是它激励人们带来新的创造性解决方案：）我也做到了这一点。但这并不能满足最后一个要求。当没有目标，但节应该是可见的。这种方法将与3,4，。。。还有更多的章节？如果是，怎么做？@KamilKiełczewski请再看一眼。这种新方法可以扩展并避免嵌套相关的性能问题。我在chrome、firefox和safari上测试了您的解决方案-效果很好-感谢您的努力：）这种方法将适用于3,4，。。。还有更多的章节？如果是-怎么做？@KamilKiełczewski如果你只是添加额外的部分——例如，
#三个
和
#三个重复
，
#四个
和
#四个重复
——以及上述相同模式的相关CSS，我看不出为什么这不能适用于无限多的部分。如果要有几个部分，您可能需要精简CSS以使用类。唯一真正的结构要求是，为了利用
~
选择器，链接必须作为目标div父容器的同级或同级出现在目标div之前。