是否可以在 CSS 中定位 "no target"？

Question

"no fragment identifier present" 有 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!

编辑：
与建议的重复项不同，我想 "simply" 在没有片段标识符的情况下显示整个文档，而不仅仅是一个元素。
换句话说，default（在没有任何#的情况下）应该显示所有内容；仅当是时，# 才应隐藏目标以外的所有内容。
重复项根本没有解决这种情况。

Answer 1

使用一些额外的标记和更冗长和具体的 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>

是否可以在 CSS 中定位 "no target"？

Is it possible to target "no target" in CSS?

html

css

css-selectors

fragment-identifier