18

a:after と a:visited を使用して、リンクを紫にするのではなく、訪問したリンクの横に (チェックマークのような) 図形を追加したいとします。

次のような形状を選択する必要があるかどうかはわかりません。

a:visited:after {

またはこのように：

a:visited a:after

また

a:visited :after {

(また、疑似要素の前にスペースを追加する必要がある場合と追加しない場合についても、少しあいまいです。それとも問題ですか?)

それとも何か違う？

現在、私のcssは次のようになっています。

a:visited:after {
    /* check mark shape */
    content:'\00a0';
    color: black;
    position: relative;
    left:15px;
    display:inline-block;
    width: 3px;
    height: 6px;
    border: solid black;
    border-width: 0 2px 2px 0;  
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
}

http://webect.net/design/webdesign/creating-fancy-bullet-points-with-pure-css3/のチェック マーク形状コード

助けてくれてありがとう。

4

1 に答える 1

28

あなたa:visited:afterは現在行っているように使用することになっています。コードのエラーのためではなく、疑似クラスに問題があるため、機能しません —プライバシー上:visitedの懸念から、疑似要素の使用が許可されていません。

したがって、基本的に、チェックマーク アイコンを訪問済みリンクのみに適用することはできません。

これに関して：

(また、疑似要素の前にスペースを追加する必要がある場合と追加しない場合についても、少しあいまいです。それとも問題ですか?)

スペースは子孫コンビネータを表すため、これは重要です。

  1. セレクターは、訪問済みリンクである別の子孫であるan の疑似要素をa:visited a:after表しますが、これは HTML ではあまり意味がありません。:afteraa

  2. セレクターは、 の任意の種類の子孫を表すことを除いて、 にa:visited :after似ています。a:visited a:after:aftera:visited

    のように書き直すことができますa:visited *:after。仕様のユニバーサル セレクターを参照してください。

スペースを省略すると、その前のセレクターによって表される要素に疑似要素を直接適用します。この場合a:visited、その子孫ではありません。

于 2012-09-09T20:11:57.473 に答える