CSS 的作用：目標選擇器-css教學-PHP中文網

範例

首頁

web前端

css教學

CSS 的作用：目標選擇器

Sep 08, 2023 am 09:33 AM

CSS 的作用：目标选择器

使用 CSS :target 選擇器透過 CSS 突出顯示活動的 HTML 錨點。

範例

您可以嘗試執行以下程式碼來實作 :target 選擇器

現場示範

&lt;!DOCTYPE html&gt;
&lt;html&gt;
   &lt;head&gt;
      &lt;style&gt;
         :target {
            border: 2px solid #D4D4D4;
            background-color: orange;
            color: white;
         }
      &lt;/style&gt;
   &lt;/head&gt;
   &lt;body&gt;
      &lt;p&gt;Click any of the subject below.&lt;/p&gt;
      &lt;p&gt;&lt;a href = &quot;#tut1&quot;&gt;Maths&lt;/a&gt;&lt;/p&gt;
      &lt;p&gt;&lt;a href = &quot;#tut2&quot;&gt;Java&lt;/a&gt;&lt;/p&gt;
      &lt;p&gt;&lt;a href = &quot;#tut3&quot;&gt;C++&lt;/a&gt;&lt;/p&gt;
      &lt;p&gt;&lt;a href = &quot;#tut4&quot;&gt;C&lt;/a&gt;&lt;/p&gt;
      &lt;p&gt;This is demo text.&lt;/p&gt;
      &lt;p&gt;This is demo text.&lt;/p&gt;
      &lt;p&gt;This is demo text.&lt;/p&gt;
      &lt;p&gt;This is demo text.&lt;/p&gt;
      &lt;p&gt;This is demo text.&lt;/p&gt;
      &lt;p id = &quot;tut1&quot;&gt;&lt;b&gt;Maths Tutorial&lt;/b&gt;&lt;/p&gt;
      &lt;p id = &quot;tut2&quot;&gt;&lt;b&gt;Java Tutorial&lt;/b&gt;&lt;/p&gt;
      &lt;p id = &quot;tut3&quot;&gt;&lt;b&gt;C++ Tutorial&lt;/b&gt;&lt;/p&gt;
      &lt;p id = &quot;tut4&quot;&gt;&lt;b&gt;C Tutorial&lt;/b&gt;&lt;/p&gt;
   &lt;/body&gt;
&lt;/html&gt;

登入後複製

以上是CSS 的作用：目標選擇器的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn