-2

我在一个 div 中有一系列 div。我想对所有这些应用一个 CSS 规则,然后使用类对其中一个应用另一个 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

一个主要问题是这.singleTiddler div将适用于所有级别的所有 div。如果下面有 div,它们也会被隐藏。覆盖 css 将仅适用于具有 class 的 div singleTiddlervisible,因此仅显示根 div。改用子选择器:

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