如果一个元素*没有*有某个类，我该如何应用 CSS？答案

【问题标题】：How do I apply CSS if an element *doesn't* have a certain class?如果一个元素*没有*有某个类，我该如何应用 CSS？
【发布时间】：2012-09-15 22:29:32
【问题描述】：

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

【问题讨论】：

你回复的太快了...不是吗？...
没有。问题表上有一个复选框，可为您提供此选项。在常见问题解答中明确鼓励。当我找到答案时，我正在输入我的问题，所以我也回答了它。希望有人会觉得它有用。
奇怪，答案是你表现得像别人？
不，你就是这样做的。我正在回答一个问题，解释的不是我做什么，而是你能做什么。
Downvoters：问然后回答你自己的问题很好。请根据实际内容的优劣投票。

标签： html css web-applications

【解决方案1】：

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

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

【讨论】：

为什么你在问完自己的问题几秒钟后就回答了？
问题表上有一个复选框。
第三人称语言有必要吗？听起来好像这是从另一个帐户发布并在稍后合并（实际上在网站上发生了很多次）。
我不知道。我也许可以，但这看起来不像是问答。我个人认为，与我所做的相反，它可以改善网站的整体效果，让您说出您可以做什么。
其实我明白你的意思。我应该说它更中性（或多或少），这可能就是你的意思。