CSSで「ターゲットなし」をターゲティングすることは可能ですか？

「フラグメント識別子がありません」のCSSセレクタはありますか？ :targetの反対です。CSSで「ターゲットなし」をターゲティングすることは可能ですか？

私は、あなたがそれを与えるフラグメント識別子に応じて、その異なる部分が見えるドキュメントを作成しています。それを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ではないでしょう！

編集：
提案されている複製とは異なり、私はフラグメント識別子がない場合は特に文書全体を「単純に」表示したいと思います。
つまり、のデフォルトの（＃がない場合）はすべてを表示する必要があります。がである場合に限り、＃ターゲットは隠されていなければならない。
重複は、この状況にまったく対処しません。

出典

2016-06-27 Mr Lister

どのようにして、サーバーの負荷を最小限に抑えていますか？ HTMLファイルが提供され、完全にダウンロードされます。セクションを非表示にしても、ロードされてダウンロードされます。だから私は、あなたがどのようにあなたが最小化していると思っているのかよく分かりません。 –

@BramVanroyこの特定の使用例では、私はウェブサイトを通していくつかのフラグメント識別子でファイルにリンクしています。だから、それは一度だけダウンロードされます（少なくとも私はそう望みます）、そして初めてユーザーのキャッシュから来ます。 –

[提案された複製のいずれかに関する私のコメント]（http://stackoverflow.com/questions/3354279/default-target-with-css#comment46876088_3354279）を参照してください。：target擬似はターゲット要素にマッチするので、ターゲット要素がない*場合は、 "：target"とのマッチングが期待されますか？ – BoltClock

JavaScriptを避けるために、いくつかの余分なマークアップと、より冗長で具体的なCSSを記述します。 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>

出典

2016-06-27 20:16:01

素晴らしい作品です、ありがとうございました！ –

CSSで「ターゲットなし」をターゲティングすることは可能ですか？

答えて

関連する問題