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

我需要在第一个faq-category-group类的div上设置样式而不影响faq-category-group的样式一个常见问题类别缩进。如何才能做到这一点？如何将css样式应用于不包含子类的类

这些类是由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>

来源

2010-12-09 greg

@ zanlok：标记没有正确缩进，所以它被解释为HTML。我修复了它。 – BoltClock 2010-12-09 19:41:11

通过该结构，仅选择的<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涵盖这两种情况。

来源

2010-12-09 19:39:31 BoltClock

IE7和IE8在第一个样本中似乎也有问题（至少在我测试它们时）。 – 2010-12-09 19:48:03

@Joel：[适用于我]（http://jsfiddle.net/BoltClock/NY5WS/） – BoltClock 2010-12-09 19:52:51

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

应该工作

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

来源

2010-12-09 19:41:52 sethvargo

你必须单独指定的类的区别：根据父

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

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

这将迫使一个被造型.faq，另一个根据父母.faq-category-indent。

来源

2010-12-09 19:44:01

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

回答

相关问题