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

时间:2016-06-27 19:29:55

标签: html css css-selectors fragment-identifier

是否存在“无片段标识符存在”的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!

编辑:
与提议的重复项不同,我想“简单地”在没有片段标识符时显示整个文档,而不仅仅是一个元素。
换句话说,默认(在没有任何#的情况下)应该是显示一切;只有当时,#应该隐藏目标以外的所有内容 重复文件根本不能解决这种情况。

1 个答案:

答案 0 :(得分:4)

使用一些额外的标记和更详细和特定的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>