-
Notifications
You must be signed in to change notification settings - Fork 8.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[zh-TW]: update CSS
:target pseudo-class (#25004)
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: A1lo <[email protected]>
- Loading branch information
3 people
authored
Dec 25, 2024
1 parent
15ce719
commit f38cc86
Showing
1 changed file
with
66 additions
and
61 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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. `<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` 無法在 [Web 組件](/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) |