path: root/files/zh-tw/web/css/_colon_target/index.html

---
title: ':target'
slug: 'Web/CSS/:target'
translation_of: 'Web/CSS/:target'
---
<div>{{CSSRef}}</div>

<p>The<code> :target </code><a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-class</a> represents the unique element, if any, with an <strong>id</strong> matching the fragment identifier of the URI of the document..</p>

<p>URIs with fragment identifiers link to a certain element within the document, known as the <em>target element</em>. For instance, here is a URI pointing to an <em>anchor</em> named <span style="border: 1px dotted gray;">section2</span>:<br>
 <code class="plain">http://example.com/folder/document.html<code style="border: 1px dotted gray;">#section2</code></code><br>
 The <em>anchor</em> can be any element with an<code> id </code>attribute, e.g.<code> &lt;h1 id="<span style="border: 1px dotted gray;">section2</span>"&gt; </code>in our example. The <em>target element</em><code> h1 </code>can be represented by the<code> :target </code>pseudo-class.</p>

<div class="note"><strong>Note:</strong> The<code> id </code>attribute was new in HTML 4 (December 1997).  In old-style HTML <code>&lt;a&gt;</code> is a target element.  The<code> :target </code>pseudo-class applies to those targets as well.</div>

<h2 id="範例">範例</h2>

<pre class="brush:css">:target { outline: solid red }  /* draw a red, solid line around the target element */
</pre>

<pre class="brush:css">/* example code for userContent.css or any web pages;
   a red/yellow arrow indicates the target element */

: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;
}

:target:before {
  font:           70% Arial,"Nimbus Sans L",sans-serif !important;
  content:        "\25ba";  /* ► */
  color:          red;
  background:     gold;
  border:         solid thin;
  padding-left:   1px;
  display:        inline-block;
  margin-right:   0.13em;
  vertical-align: 20%;
}
</pre>

<h3 id="Working_with_display_none_elements…">Working with display: none elements…</h3>

<p>The <code>:target</code> pseudo-class also works fine with <strong>undisplayed elements</strong>:</p>

<pre class="brush: html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset="UTF-8"&gt;
&lt;title&gt;:target pseudoclass example&lt;/title&gt;
&lt;style&gt;
#newcomment {
  display: none;
}

#newcomment:target {
  display: block;
}
&lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;
 &lt;p&gt;&lt;a href="#newcomment"&gt;Add a comment&lt;/a&gt;&lt;/p&gt;
 &lt;div id="newcomment"&gt;
  &lt;form&gt;
  &lt;p&gt;Write your comment:&lt;br /&gt;
  &lt;textarea&gt;&lt;/textarea&gt;&lt;/p&gt;
  &lt;/form&gt;
 &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>

<h3 id="Creating_a_pure_CSS_lightbox">Creating a pure CSS "lightbox"</h3>

<p>The <code>:target</code> pseudo-class is useful to switch on/off some invisible elements. In this way you can create a pure-CSS lightbox (<a href="https://developer.mozilla.org/files/4607/lightbox.html">live demo</a>).</p>

<div style="height: 400px; margin-bottom: 12px; overflow: auto;">
<pre class="brush: html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset="UTF-8" /&gt;
&lt;title&gt;MDN Example &amp;ndash; CSS Lightbox&lt;/title&gt;
&lt;style type="text/css"&gt;
div.lightbox {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

div.lightbox:target {
  display: table;
}

div.lightbox figure {
  display: table-cell;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  vertical-align: middle;
}

div.lightbox figure figcaption {
  display: block;
  margin: auto;
  padding: 8px;
  background-color: #ddbbff;
  height: 250px;
  position: relative;
  overflow: auto;
  border: 1px #000000 solid;
  border-radius: 10px;
  text-align: justify;
  font-size: 14px;
}

div.lightbox figure .closemsg {
  display: block;
  margin: auto;
  height: 0;
  overflow: visible;
  text-align: right;
  z-index: 2;
  cursor: default;
}

div.lightbox figure .closemsg, div.lightbox figure figcaption {
  width: 300px;
}

.closemsg::after {
  content: "\00D7";
  display: inline-block;
  position: relative;
  right: -20px;
  top: -10px;
  z-index: 3;
  color: #ffffff;
  border: 1px #ffffff solid;
  border-radius: 10px;
  width: 20px;
  height: 20px;
  line-height: 18px;
  text-align: center;
  margin: 0;
  background-color: #000000;
  font-weight: bold;
  cursor: pointer;
}

.closemsg::before {
  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #000000;
  opacity: 0.85;
}
&lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;

&lt;h1&gt;Pure CSS Lightbox&lt;/h1&gt;

&lt;p&gt;Some sample text&amp;hellip;&lt;/p&gt;

&lt;p&gt;[ &lt;a href="#example1"&gt;Open example #1&lt;/a&gt; | &lt;a href="#example2"&gt;Open example #2&lt;/a&gt; ]&lt;/p&gt;

&lt;p&gt;Another sample text&amp;hellip;&lt;/p&gt;

&lt;div class="lightbox" id="example1"&gt;
  &lt;figure&gt;
    &lt;a href="#" class="closemsg"&gt;&lt;/a&gt;
    &lt;figcaption&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec felis enim, placerat id eleifend eu, semper vel sem. Sed interdum commodo enim venenatis pulvinar. Proin mattis lorem vitae diam scelerisque hendrerit. Fusce cursus imperdiet mauris, vitae hendrerit velit dignissim a. Suspendisse potenti. Aenean feugiat facilisis diam, in posuere sapien mattis vel. Proin molestie rutrum diam, pharetra feugiat ligula sollicitudin sed. Etiam cursus diam quis tellus aliquam gravida. Aliquam erat volutpat.&lt;br /&gt;
    Etiam varius adipiscing mi eget imperdiet. Nulla quis vestibulum leo. Integer molestie massa ut massa commodo in blandit purus aliquam. Mauris sit amet posuere massa. Ut a eleifend augue. Proin sodales mauris nec tellus pharetra dictum.&lt;/figcaption&gt;
  &lt;/figure&gt;
&lt;/div&gt;

&lt;div class="lightbox" id="example2"&gt;
  &lt;figure&gt;
    &lt;a href="#" class="closemsg"&gt;&lt;/a&gt;
    &lt;figcaption&gt;Cras risus odio, pharetra nec ultricies et, mollis ac augue. Nunc et diam quis sapien dignissim auctor. Quisque quis neque arcu, nec gravida magna. Etiam ullamcorper augue quis orci posuere et tincidunt augue semper. Maecenas varius augue eu orci auctor bibendum tristique ligula egestas. Morbi pharetra tortor iaculis erat porta id aliquam leo cursus. Ut nec elit vel mauris dapibus lacinia eget sed odio.&lt;/figcaption&gt;
  &lt;/figure&gt;
&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;</pre>
</div>

<h2 id="規範">規範</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName("CSS4 Selectors", "#the-target-pseudo", ":target")}}</td>
   <td>{{Spec2("CSS4 Selectors")}}</td>
   <td>No changes</td>
  </tr>
  <tr>
   <td>{{SpecName("CSS3 Selectors", "#target-pseudo", ":target")}}</td>
   <td>{{Spec2("CSS3 Selectors")}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="瀏覽器兼容性">瀏覽器兼容性</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>1.0</td>
   <td>{{CompatGeckoDesktop("1.3")}}</td>
   <td>9</td>
   <td>9.5</td>
   <td>1.3</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>2.1</td>
   <td>{{CompatGeckoMobile("1.3")}}</td>
   <td>9.0</td>
   <td>9.5</td>
   <td>2.0</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="參見">參見</h2>

<ul>
 <li><a href="/en-US/docs/Using_the_:target_selector">使用 :target</a></li>
</ul>