如何將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樣式應用於不包含子類的類

回答

相關問題