0

私は次のCSSを持っています：

#clickto {
    color: white;
    text-shadow: 2px 2px 2px Darkblue;
}

#verdescheading:hover {
    border-bottom: 1px solid;
}


    #verdescheading :before {
        content: " >";
    }

    #verdescheading :after {
        content: " <";
    }

    #verdescheading .clicked:before {
        content: "< ";
    }

    #verdescheading .clicked:after {
        content: "> ";
    }

および次のhtml（これはfirebugから直接カット＆ペーストされているため、可能な限り正確です）：

<h1 id="verdescheading" class="">
Important notice
<span id="clickto">(Click to expand)</span>
</h1>

イベントのタイトル部分をクリックすると、「verdescheading」のクラスが「clicked」に設定されます。Firebugは、すべてが適切に設定されていることを示しています。ただし、このページに表示される内容は少し異なります。

まず、スタイルシートに従って設定された>および<記号は、id verdescのh1ではなく、id'clickto'のスパン、つまりその直接の子の前後に表示されます。Firebugは、「クリックされた」クラスが子ではなく親に設定されていることを明確に示しています。

もう1つは、シンボルが変更されないことです。つまり、.clicked：beforeと.clicked：afterではなく、常に：beforeと：afterのルールになります。

4

1 に答える 1

4 
#verdescheading.clicked:before {
    content: "< ";
}

#verdescheading.clicked:after {
    content: "> ";
}

idとclassは同じ要素上にあり、その子の1つではないため、シンボルが変更されないように修正されます。スペースはありません。

他のものも間隔の問題で修正されています：

#verdescheading:before {
    content: " >";
}

#verdescheading:after {
    content: " <";
}

bfavarettoの厚意によりJSFiddlejsfiddle.net/BWghmを参照してください。

于 2012-08-08T22:26:56.400 に答える