ターゲット擬似クラスセレクターとは何ですか? css:ターゲットセレクターの使い方-CSSチュートリアル-php.cn

ターゲット擬似クラスセレクターとは何ですか? css:ターゲットセレクターの使い方

云罗郡主

リリース： 2018-11-19 10:48:47

転載

4217 人が閲覧しました

この記事では、ターゲット擬似クラスセレクターとは何なのかについて説明します。 css:target セレクターの使用方法には一定の参考値があります。必要な方は参考にしていただければ幸いです。

ターゲットセレクターの概要

: ターゲットセレクターは、ページ内のターゲット要素を選択するために使用されます。では、対象となる要素は何でしょうか？ターゲット要素とは、端的に言えば、要素の ID がページ上のハイパーリンクとして使用されることです。わかりにくいですか？まずはみんなに試してもらえる料理を出しましょう。

例:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head> 
    <title>CSS3 :target选择器</title>
    <style type="text/css">
        :target h3
        {
            color:red;
        }
    </style>
</head>
<body>
    <div>
        <a href="#music">推荐音乐</a><br />
        <a href="#movie">推荐电影</a><br />
        <a href="#article">推荐文章</a><br />
    </div>
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    <div id="music">
        <h3>推荐音乐</h3>
        <ul>
            <li>林俊杰-被风吹过的下图</li>
            <li>曲婉婷-在我的歌声里</li>
            <li>许嵩-灰色头像</li>
        </ul>
    </div>
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    <div id="movie">
        <h3>推荐电影</h3>
        <ul>
            <li>蜘蛛侠系列</li>
            <li>钢铁侠系统</li>
            <li>复仇者联盟</li>
        </ul>
    </div>
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    <div id="article">
        <h3>推荐文章</h3>
        <ul>
            <li>朱自清-荷塘月色</li>
            <li>余光中-乡愁</li>
            <li>鲁迅-阿Q正传</li>
        </ul>
    </div>
</body>
</html>

ログイン後にコピー

効果は次のとおりです:

ターゲット擬似クラスセレクターとは何ですか? css:ターゲットセレクターの使い方