CSSの役割：ターゲットセレクター-CSSチュートリアル-php.cn

例

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSSの役割：ターゲットセレクター

Sep 08, 2023 am 09:33 AM

CSS 的作用：目标选择器

CSS :target セレクターを使用して、CSS 経由でアクティブな HTML アンカーを強調表示します。

例

次のコードを実行して :target selector を実装してみることができます。

ライブデモンストレーション

&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 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。