是否有可能瞄准“无目标”？在CSS中？ [英] Is it possible to target "no target" in CSS?
问题描述
是否存在没有片段标识符存在的css选择器？与之相反的是：target 。
事情是，我正在制作一个文档，其中的不同部分是根据您提供的片段标识符可见。
所以看起来像这样
< style>
section {display：none}
section：target {display：block}
< / style>
< body>
< section id =one>第一个区块（以#one显示）< / section>
< section id =two>第二个区块（以#two显示）< / section>
< section id =three>第三个区块（以#three显示）< / section>
< / body>
如果使用 document.html＃一个在地址栏上等。
这个想法是浏览器会缓存html页面（因为它只是静态html）和当显示另一块文本时，没有其他内容需要加载，从而最大限度地减少了服务器负载。
但是，如果在没有片段标识符的情况下调用它，所以我想知道是否有办法在这种情况下使其全部可见，而没有任何隐藏的部分。仅限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>一个< / a> < a href =＃two>两个< / a> < a href =＃3>三< / a> < a href =＃>以下任意一个目标< / a>< / nav><！ - html anchor以允许使用：target〜selectors - >< a id =one < / a>< a id =two>< / a>< a id =three>< / a><！ - end anchor - ><第一个块（用#one表示）< / section>< section class =two>第二个块（用#two表示）< / section><节类=three>第三个区块（以#three显示）< / section>
Is there a css selector for "no fragment identifier present"? The opposite of :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.
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.
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.
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; otherwise it wouldn't be static 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.
with some extra markup and more verbose and specific CSS to write, to avoid javascript. Needs to be updated each time HtML structure is updated .
: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中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
