是否有“不存在片段标识符”的 CSS 选择器？相反的是:target.
问题是，我正在制作一个文档，其中不同部分是可见的，具体取决于您提供的片段标识符。将其视为精灵文件，仅适用于 HTML。
所以看起来像这样
<style>
section {display:none}
section:target {display:block}
</style>
<body>
<section id="one">The first block (showing with #one)</section>
<section id="two">The second block (showing with #two)</section>
<section id="three">The third block (showing with #three)</section>
</body>
如果第一部分显示为，则用户会看到第一部分document.html#one在位置栏等上
这个想法是，浏览器将缓存 html 页面（因为它只是静态 html），并且在显示另一个文本块时不需要加载其他内容，从而最大限度地减少服务器负载。
但是，当您在没有片段标识符的情况下调用该文件时，该文件看起来非常空，所以我想知道是否有一种方法可以在这种情况下使其所有内容都可见，而没有任何隐藏部分。仅 CSS，无 JS 或服务器端处理；否则它就不是静态 HTML！
Edit:
与建议的重复项不同，当没有片段标识符时，我想“简单地”显示整个文档，而不仅仅是一个特定元素。
换句话说，default（在没有任何#的情况下）应该显示所有内容；仅当有is# 应该隐藏除目标之外的所有内容。
重复项根本没有解决这种情况。
使用一些额外的标记和更详细、更具体的 CSS 来编写，以避免使用 javaScript。每次更新 HTML 结构时都需要更新 .
:target ~section {
display:none;
}
#one:target ~.one,
#two:target ~.two,
#three:target ~.three {
display:block;
}
<nav>
<a href="#one">One</a>
<a href="#two">Two</a>
<a href="#three">Three</a>
<a href="#">None of below targets</a>
</nav>
<!-- html anchor to allow use of :target ~ selectors -->
<a id="one"></a>
<a id="two"></a>
<a id="three"></a>
<!-- end anchor -->
<section class="one">The first block (showing with #one)</section>
<section class="two">The second block (showing with #two)</section>
<section class="three">The third block (showing with #three)</section>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
