如果元素*没有某个类,我该如何应用CSS?

时间:2012-09-24 12:53:58

标签: html css web-applications

我在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>

1 个答案:

答案 0 :(得分:0)

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

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