如何将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>
通过该结构,仅选择的<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涵盖这两种情况。
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
{
color: #00ff00;
}
.faq .faq-category-indent .faq-category-group
{
color: #0000ff;
}
这将迫使一个被造型.faq
,另一个根据父母.faq-category-indent
。
@ zanlok:标记没有正确缩进,所以它被解释为HTML。我修复了它。 – BoltClock 2010-12-09 19:41:11