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

我需要在第一个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>
最佳答案
通过该结构,仅选择作为< 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.

相关文章

Css常用的排序方式权重分配 排序方式: 1、按类型&#160;...
原文:https://www.cnblogs.com/wenruo/p/9732704.html 先上...
css属性:word-wrap:break-word; 与 word-break:break-all 的...
https://destiny001.gitee.io/color/
&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML...
css之background的cover和contain的缩放背景图 对于这两个属...