4

ウェブサイトからのインドからのこの男Motyar：http://motyar.blogspot.no/2011/02/handling-onclick-event-with-css.htmlは、divを 非表示および表示するための非常に優れた純粋なcssメソッドを示しました。しかし、私には理解できないようです。これがコードです。これを私、初心者に説明してください。

HTML（私のコードではありません）：

<div id="lightbox">

              <a href="#">Hide me</a><br />
              Hi!! <br />

              i am the lighbox

</div>

<a href="#lightbox" >Show the lighbox</a>

CSS（私のコードではありません）：

#lightbox {
        display:none;
    }

 /* works with IE8+, Firefox 2+, Safari, Chrome, Opera 10+ */

 #lightbox:target {
         display:block;
      }

これを包括的に説明してください。ありがとうございました ：）

4

3 に答える 3

2

:targetたとえば、CSSでは、CSS トークンの後に配置された#lightboxは#lightbox:target、ページの URL#lightboxにhttp://www.stackoverflow.com/#lightbox. この場合、次のコードがブラウザによって評価されます。

#lightbox:target { display:block; }
于 2013-01-16T07:36:32.983 に答える
1

W3 Selectors レベル 3 勧告の時点で :

例：

p.note:ターゲット

このセレクターは、参照する URI のターゲット要素であるクラス ノートの ap 要素を表します。

したがって、 をクリックする#lightboxと、lightbox-Element がURIのターゲットになります。

疑似セレクターはこれを識別し、適切なスタイルを適用できます。

于 2013-01-16T07:36:13.340 に答える
0

キーは:target疑似セレクターです。アクティブなアンカー (#lightboxこの場合) の資格があります。

詳細については、http: //css-tricks.com/on-target/をご覧ください。

于 2013-01-16T07:36:06.190 に答える