如何将CSS样式应用于不包含子类的类

Question

我需要在第一个 faq-category-group 类的 div 上设置样式，而不影响 faq-category-indent 中的 faq-category-group 的样式。如何实现呢？

这些类是由 PHP 模块自动生成的，所以更改类名以使选择器更容易并不是一个选项。

<div class="faq">
    <div class="faq-category-group">Content</div>

    <div class="faq-category-indent">
        <div class="faq-category-group">Content</div>
    </div>
</div>

- greg

---

@zanlok：标记没有正确缩进，因此被解释为HTML。我已经修复了它。 - BoltClock

Answer 1

按照这个结构，仅选择作为 <div class="faq"> 的子元素的组，并应用您不想应用于缩进组的样式。包含在 <div class="faq-category-indent"> 中的组将不受影响。

.faq .faq-category-group {
    /* Styles for all groups */
}

.faq > .faq-category-group {
    /* Styles for non-indented groups */
}

假设您不关心IE6，那么另一个更冗长的解决方案是这样的：

.faq .faq-category-group, .faq .faq-category-indent .faq-category-group {
    /* Styles for all groups */
}

.faq .faq-category-group {
    /* 
     * Styles for non-indented groups.
     * Works because .faq .indent .group above is more specific than
     * this one, so the above rule will override this one.
     */
}

这里有一个jsFiddle示例，涵盖了两种情况。

- BoltClock

---

IE7和IE8似乎也存在第一个示例的问题（至少在我测试时是这样）。 - Joel Etherton

我有点要“纠正自己的错误”。当我查看您的链接时，我发现它可以工作。但是当我将您的样式粘贴到我的测试中时，它无法工作。我无法解释这种差异的原因，因此我得出结论，我的测试没有用处。 - Joel Etherton

Answer 2

你必须单独指定类之间的差异：

.faq .faq-category-group
{
    color: #00ff00;
}

.faq .faq-category-indent .faq-category-group
{
    color: #0000ff;
}

这将强制一个元素根据父元素.faq进行样式设置，另一个元素根据父元素.faq-category-indent进行样式设置。

- Joel Etherton

Answer 3

.faq > .faq-category-group {
   /*style*/
}

应该能够工作

来源: http://www.w3.org/TR/css3-selectors/

- sethvargo

---

@Joel：不，> 是CSS2选择器。它只在IE <= 6中失败。 - BoltClock

@BoltClock - 我刚在IE7和IE8中测试了一下，它失败了。 - Joel Etherton

">" 绝对是 CSS2 选择器，没有理由在 IE7/8 中失败。更好的问题是，为什么你还在使用 IE7/8？好吧，那就定义两个样式 - 一个像上面那样没有 ">"，另一个是 .faq * .faq-category-group，用于“回滚”之前的样式。 - sethvargo

@Seth - 你那带有轻蔑和不屑的态度似乎忽略了那些需要使用多种浏览器进行开发的人。你没有权利决定哪些浏览器有用或没用。 - Joel Etherton

@Joel - 我的傲慢语气源于你批评却没有提供新信息。感谢你指出它在IE中不起作用，但如果你能提供自己的解决方案而不是批评他人，那就太好了。谢谢。 - sethvargo