mdn · yin1999 · Dec 25, 2024 · Dec 11, 2024 · Dec 11, 2024 · Dec 16, 2024
@@ -1,95 +1,104 @@
 ---
 title: ":target"
 slug: Web/CSS/:target
+l10n:
+  sourceCommit: 92447fec056cc89b7f28445851bea0c981fcbc12
 ---
 
 {{CSSRef}}
 
-The`:target`[pseudo-class](/zh-TW/docs/Web/CSS/Pseudo-classes) represents the unique element, if any, with an **id** matching the fragment identifier of the URI of the document..
+**`:target`** [CSS](/zh-TW/docs/Web/CSS) [偽類](/zh-TW/docs/Web/CSS/Pseudo-classes)代表一個獨特的元素（稱為目標元素），其 [`id`](/zh-TW/docs/Web/HTML/Global_attributes/id) 與 URL 的片段（fragment）相匹配。
 
-URIs with fragment identifiers link to a certain element within the document, known as the _target element_. For instance, here is a URI pointing to an _anchor_ named section2:
-`http://example.com/folder/document.html#section2`
-The _anchor_ can be any element with an`id`attribute, e.g. `<h1 id="section2">` in our example. The _target element_ `h1` can be represented by the `:target` pseudo-class.
+```css
+/* 選擇與當前 URL 的片段相匹配的 ID 的元素 */
+:target {
+  border: 2px solid black;
+}
+```
 
-> [!NOTE]
-> The`id`attribute was new in HTML 4 (December 1997). In old-style HTML `<a>` is a target element. The`:target`pseudo-class applies to those targets as well.
+例如，以下 URL 包含一個片段（以 _#_ 符號表示），指向名為 `section2` 的元素：
 
-## 範例
+```url
+http://www.example.com/index.html#section2
+```
+
+當當前 URL 等於上述內容時，以下元素將被 `:target` 選擇器選中：
+
+```html
+<section id="section2">範例</section>
+```
+
+## 語法
 
 ```css
 :target {
-  outline: solid red;
-} /* draw a red, solid line around the target element */
+  /* ... */
+}
 ```
 
+> [!NOTE]
+> 由於 [CSS 規範中的可能錯誤](https://discourse.wicg.io/t/target-css-does-not-work-because-shadowroot-does-not-set-a-target-element/2070/)，`:target` 無法在[網頁組件](/zh-TW/docs/Web/API/Web_components)中運作，因為[影子根](/zh-TW/docs/Web/API/ShadowRoot)無法將目標元素傳遞到影子樹中。
+
+## 範例
+
+### 目錄
+
+`:target` 偽類可以用於高亮顯示從目錄中連結到的頁面部分。
+
+#### HTML
+
+```html
+<h3>目錄</h3>
+<ol>
+  <li><a href="#p1">跳到第一段！</a></li>
+  <li><a href="#p2">跳到第二段！</a></li>
+  <li>
+    <a href="#nowhere"> 此連結無效，因為目標不存在。 </a>
+  </li>
+</ol>
+
+<h3>我的有趣文章</h3>
+<p id="p1">
+  你可以使用 URL 片段來定位<i>這段文字</i>。點擊上面的連結試試看！
+</p>
+<p id="p2">
+  這是<i>另一段文字</i>，也可以從上面的連結訪問。是不是很有趣？
+</p>
+```
+
+#### CSS
+
 ```css
-/* example code for userContent.css or any web pages;
-   a red/yellow arrow indicates the target element */
+p:target {
+  background-color: gold;
+}
 
-:target {
-  -webkit-box-shadow: 0.2em 0.2em 0.3em #888;
-  -moz-box-shadow: 0.2em 0.2em 0.3em #888;
-  box-shadow: 0.2em 0.2em 0.3em #888;
+/* 在目標元素內添加偽元素 */
+p:target::before {
+  font: 70% sans-serif;
+  content: "►";
+  color: limegreen;
+  margin-right: 0.25em;
 }
 
-:target:before {
-  font:
-    70% Arial,
-    "Nimbus Sans L",
-    sans-serif !important;
-  content: "\25ba"; /* ► */
+/* 樣式目標元素內的斜體文字 */
+p:target i {
   color: red;
-  background: gold;
-  border: solid thin;
-  padding-left: 1px;
-  display: inline-block;
-  margin-right: 0.13em;
-  vertical-align: 20%;
 }
 ```
 
-### Working with display: none elements…
+#### 結果
 
-The `:target` pseudo-class also works fine with **undisplayed elements**:
-
-```html
-<!doctype html>
-<html>
-  <head>
-    <meta charset="UTF-8" />
-    <title>:target pseudoclass example</title>
-    <style>
-      #newcomment {
-        display: none;
-      }
-
-      #newcomment:target {
-        display: block;
-      }
-    </style>
-  </head>
-  <body>
-    <p><a href="#newcomment">Add a comment</a></p>
-    <div id="newcomment">
-      <form>
-        <p>
-          Write your comment:<br />
-          <textarea></textarea>
-        </p>
-      </form>
-    </div>
-  </body>
-</html>
-```
+{{EmbedLiveSample('目錄', 500, 300)}}
 
 ## 規範
 
 {{Specifications}}
 
-## 瀏覽器兼容性
+## 瀏覽器相容性
 
 {{Compat}}
 
 ## 參見
 
-- [使用 :target](/zh-TW/docs/Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors)
+- [在選擇器中使用 :target 偽類](/zh-TW/docs/Web/CSS/CSS_selectors/Using_the_:target_pseudo-class_in_selectors)