實作CSS :target偽類別選擇器的各種應用場景

實作CSS :target偽類別選擇器的各種應用場景，需要具體程式碼範例

CSS : target 偽類別選擇器是常用的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. 模態方塊效果：

透過使用: target 偽類選擇器和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. 捲動頁面到指定節

利用: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：

html,body {
  scroll-behavior: smooth;
}

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

透過運用:target 偽類別選擇器，我們能夠實現多種實用的效果，如導航連結樣式切換、模態框效果和平滑滾動等。這些場景只是眾多應用程式中的一部分，您可以根據實際需求進行擴展，並發揮更多創意。希望本文對您的學習和實踐有所幫助！

以上是實作CSS :target偽類別選擇器的各種應用場景的詳細內容。更多資訊請關注PHP中文網其他相關文章！