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

Question

是否有用于“不存在片段标识符”的 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！

编辑：
与建议的重复项不同，当没有片段标识符时，我想“简单地”显示整个文档，而不仅仅是一个特定的元素。
换句话说，默认值（没有任何#）应该是显示所有内容； 只有当有一个＃应该一切，但目标是隐藏的。
重复项根本没有解决这种情况。

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 中定位“无目标”？

问题描述

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