diff --git a/files/zh-tw/web/css/_colon_target/index.md b/files/zh-tw/web/css/_colon_target/index.md index 4a3c8eebb254f9..3b8fb1e81b3bed 100644 --- a/files/zh-tw/web/css/_colon_target/index.md +++ b/files/zh-tw/web/css/_colon_target/index.md @@ -1,95 +1,100 @@ --- 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. `

` 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 `` 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 +
範例
+``` + +## 語法 ```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` 無法在 [Web 組件](/zh-TW/docs/Web/API/Web_components)中運作，因為[影子根](/zh-TW/docs/Web/API/ShadowRoot)無法將目標元素傳遞到影子樹中。 + +## 範例 + +### 目錄 + +`:target` 偽類可以用於高亮顯示從目錄中連結到的頁面部分。 + +#### HTML + +```html +

目錄

+
    +
  1. 跳到第一段！
    2. +
  2. 跳到第二段！
    3. +
  3. + 此連結無效，因為目標不存在。 +
    4. +
+ +

我的有趣文章

+

你可以使用 URL 片段來定位這段文字。點擊上面的連結試試看！

+

這是另一段文字，也可以從上面的連結訪問。是不是很有趣？

+``` + +#### 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 - - - - - :target pseudoclass example - - - -

Add a comment

-
-
-

- Write your comment:
- -

-
-
- - -``` +{{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)