css - CSS 3 :target が別のものに設定されている場合、要素を非表示にします - 空白の場合に表示しますか?

Question

私が思いついたこのアイデアに対する純粋な CSS3 ソリューションがあるかどうかを確認しようとしています。

基本的に、ユーザーがに移動した場合http://example.com、ページに要素を表示したいと思います<section id="main" />。せっかく訪れたのなら、http://example.com/#picsフォトギャラリーを見せたいと思います。

これは JQuery でできることはわかっていますが、できる限り CSS3 でやろうとしています。これは単なる実験的なサイトなので、ブラウザーのサポートは優先事項ではありませんが、フォールバックに興味があります。

score 3 · Accepted Answer

この回答は、クラス「hideme」の要素を選択していることを前提としています。ケースに応じて必要に応じて調整します。

あらゆる種類の「そうでない場合」は、:not()疑似クラスで実行できます。この場合：

.hideme:not(:target) {display: none;}

ただし、これに対するブラウザのサポートは非常に低いため、代わりに次のようにする必要があります。

selector {do something}
selector:target {cancel the something}

displayさて、これは、要素ごとにデフォルトが異なるため、少し注意が必要visibilityですが、次のオプションがあります。

.hideme {visibility: hidden;}
.hideme:target {visibility: visible;}

または、追加で、選択したアイテムをドキュメントのフローから使用position:absoluteおよび削除できる場合があります。position:static

score 0 · Accepted Answer

：targetセレクターと：notセレクターを見てください

あなたはの線に沿って何かをすることができます

div:not(:target){
  display:none
}

#main:target {
   display:block;
}

#pics:target {
    display:block;
}

参照：
http ：//www.w3.org/TR/selectors/セクション6.6.7は：notセレクターです（ファイルにターゲットがありません）

と

3 に答える 3