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>

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 example。

Answer 2

您必须单独指定类别中的差异：

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

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

这将根据父.faq强制根据父.faq-category-indent设置样式，而根据父{{1}}强制设置另一个。

Answer 3

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

应该有效

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

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

3 个答案: