CSS :target 擬似クラスセレクターのさまざまなアプリケーションシナリオを実装する

CSS :target pseudo-class selector のさまざまなアプリケーション シナリオを実装するには、特定のコード例が必要です。

CSS :target pseudo-class selector は、一般的に使用される CSS 選択です。 URL 内のアンカー (#) に基づいて特定の要素を選択するブラウザ。この記事では、この疑似クラス セレクターを使用する実際のアプリケーション シナリオをいくつか紹介し、対応するコード例を示します。

1. ページ内ナビゲーション リンク スタイルの切り替え:

ユーザーがページ内のナビゲーション リンクをクリックすると、:target 疑似クラス セレクターを使用して選択できます。現在クリックされているナビゲーション リンク。ユーザーのいる場所を強調表示するスタイルを追加します。サンプル コードは次のとおりです。

HTML:

<ul class="navigation">
  <li><a href="#section1">Section 1</a></li>
  <li><a href="#section2">Section 2</a></li>
  <li><a href="#section3">Section 3</a></li>
</ul>

<div id="section1">Section 1 Content</div>
<div id="section2">Section 2 Content</div>
<div id="section3">Section 3 Content</div>

CSS:

.navigation a:target {
  font-weight: bold;
  color: red;
}

2. モーダル効果:

使用方法: ターゲット疑似クラス セレクターと CSS3 トランジション エフェクトを使用すると、シンプルなモーダル ボックス効果を実現できます。以下はサンプル コードです。

HTML:

<div class="modal" id="modal">
  <div class="modal-content">
    <h2>Title</h2>
    <p>Modal Content</p>
    <a href="#!" class="close-button">Close</a>
  </div>
</div>
<a href="#modal">Open Modal</a>

CSS:

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
}

.modal:target {
  display: block;
}

.modal-content {
  background-color: white;
  width: 300px;
  padding: 20px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.close-button {
  text-align: center;
  display: block;
  margin-top: 20px;
}

3. 指定されたセクションまでページをスクロールします。

活用: ターゲット疑似クラス セレクターとスクロール アニメーション効果により、ナビゲーション リンクをクリックしたときにページの指定されたセクションまでスムーズにスクロールできます。以下はサンプルコードです:

HTML:

<ul class="navigation">
  <li><a href="#section1">Section 1</a></li>
  <li><a href="#section2">Section 2</a></li>
  <li><a href="#section3">Section 3</a></li>
</ul>

<div id="section1">Section 1 Content</div>
<div id="section2">Section 2 Content</div>
<div id="section3">Section 3 Content</div>

CSS:

html,body {
  scroll-behavior: smooth;
}

#section1:target,
#section2:target,
#section3:target {
  padding-top: 100px; /* 调整目标节的位置，以免内容被导航遮挡 */
}

:target 擬似クラスセレクターを使用すると、さまざまな実用的な効果を実現できます。ナビゲーションリンクスタイルの切り替え、モーダルボックス効果、スムーズスクロールなど。これらのシナリオは多くのアプリケーションの一部にすぎず、実際のニーズに応じて拡張し、より創造的に使用することができます。この記事があなたの学習や実践に役立つことを願っています。

以上がCSS :target 擬似クラスセレクターのさまざまなアプリケーションシナリオを実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。