是否有用于“不存在片段标识符”的 css 选择器?与 :target
相反。
问题是,我正在制作一个文档,其中的不同部分是可见的,具体取决于您为其提供的片段标识符。将其视为 sprite 文件,仅适用于 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)并且在显示另一个文本 block 时不需要加载其他内容,从而最大限度地减少服务器负载。
但是当您在没有片段标识符的情况下调用文件时,该文件看起来空空如也,所以我想知道在这种情况下是否有办法使所有文件都可见,而没有任何隐藏部分。只有 CSS,没有 JS 或服务器端处理;否则它就不是静态 HTML!
编辑:
与建议的重复项不同,我想在没有片段标识符的情况下“简单地”显示整个文档,而不是特别是一个元素。
换句话说,默认(在没有任何 # 的情况下)应该显示所有内容;仅当存在 # 时才应隐藏目标以外的所有内容。
重复项根本没有解决这种情况。
最佳答案
使用一些额外的标记和更冗长的特定 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>
关于html - 是否可以在 CSS 中定位 "no target"?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38061792/