是否可以在 CSS 中定位“无目标”？

Question

Is there a css selector for "no fragment identifier present"?是否有用于“不存在片段标识符”的 css 选择器？ The opposite of :target . :target的反面。

The thing is, I'm making a document where different parts of it are visible depending on which fragment identifier you give it.问题是，我正在制作一个文档，其中的不同部分是可见的，具体取决于您提供的片段标识符。 Think of it as a sprite file, only for HTML.把它想象成一个精灵文件，只适用于 HTML。

So it looks like this所以它看起来像这样

<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>

And the user sees the first section if it's displayed with document.html#one on the location bar, etc.如果在位置栏上显示document.html#one等，用户会看到第一部分。

The idea is that the browser will cache the html page (since it is just static html) and no other content needs to be loaded when displaying another block of text, thus minimising server load.这个想法是浏览器将缓存 html 页面（因为它只是静态 html）并且在显示另一个文本块时不需要加载其他内容，从而最小化服务器负载。

But the file looks stupidly empty when you call it up without a fragment identifier, so I wonder if there's a way to make all of it visible in that case, without any hidden sections.但是当您在没有片段标识符的情况下调用文件时，该文件看起来非常空，所以我想知道是否有办法在这种情况下使其所有内容都可见，而没有任何隐藏部分。 CSS only, no JS or server side processing;只有 CSS，没有 JS 或服务器端处理； otherwise it wouldn't be static HTML!否则它就不是静态 HTML！

Edit:编辑：
Unlike the proposed duplicates, I would like to "simply" show the whole document when there's no fragment identifier, not just one element in particular.与建议的重复项不同，当没有片段标识符时，我想“简单地”显示整个文档，而不仅仅是一个特定的元素。
In other words, the default (in the absence of any #) should be to show everything;换句话说，默认值（没有任何#）应该是显示所有内容； only if there is an # should everything but the target be hidden.只有当有一个＃应该一切，但目标是隐藏的。
The duplicates don't address this situation at all.重复项根本没有解决这种情况。

Answer 1

With some extra markup and more verbose and specific CSS to write, to avoid javaScript.使用一些额外的标记和更详细和特定的 CSS 来编写，以避免使用 javaScript。 Needs to be updated each time HTML structure is updated .每次更新 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 中定位“无目标”？

问题描述

1 个解决方案

解决方案1
5 已采纳 2016-06-27 20:16:01

是否可以在 CSS 中定位“无目标”？

问题描述

1 个解决方案

解决方案1 5 已采纳 2016-06-27 20:16:01

解决方案1
5 已采纳 2016-06-27 20:16:01