-2

div 内に一連の div があります。そして、それらすべてに css ルールを適用し、クラスを使用してそのうちの 1 つに別の css ルールを適用したいと考えています。これが私の現在のスタイルです：

.singleTiddler div { display:none; }
.singleTiddler div.singleTiddlervisible { display:block; }

Chrome の問題は、インスペクターで display:block を使用していると表示されるが、何も表示されないことです。面白いことに、インスペクターでマウスを合わせると、そこにあるのに高さがありません。

<div id="tiddlerDisplay" class="singleTiddler">
    <div class="singleTiddlervisible">
        <div>Hi</div><div>There</div><div>We</div>
        <div>Like</div><div>Divs</div>
    </div>
    <div>
        <div>Hi</div><div>There</div><div>We</div>
        <div>Like</div><div>Divs</div>
    </div>
    <div>
        <div>Hi</div><div>There</div><div>We</div>
        <div>Like</div><div>Divs</div>
    </div>
</div>
4

1 に答える 1

0

1 つの大きな問題は、.singleTiddler divすべてのレベルのすべての div に適用されることです。下に div がある場合は、それらも非表示になります。オーバーライド css は class を持つ div にのみ適用されるためsingleTiddlervisible、ルート div のみが表示されます。代わりに子セレクターを使用します。

.singleTiddler > div { display:none; }
.singleTiddler > div.singleTiddlervisible { display:block; }
于 2012-09-24T12:53:58.233 に答える