停止CSS層次

我有一個層次結構，如下：停止CSS層次

<div class="outer"> 
    <h1>Heading</h1> 
    <p>Paragraph</p> 
    <p><a>Link</a></p> 

    <div class="inner"> 
     <h1>Heading</h1> 
     <p>Paragraph</p> 
     <p><a>Link</a></p> 
    </div> 
</div>

我想outer DIV中的元素以某種方式風格，並inner專區內的元素在另一個樣式。

但是，我不想污染我的規則inner重置每個屬性outer規則定義的規則。我想避免margin: 0px。請注意，當然，我的樣式表要複雜得多，重置次數會更多，更煩人。

outer a { margin: 5px; } 
inner a { margin: 0px; color: orange; }

我最初的反應也是使用直接子選擇>，但是，比如說，鏈接，強，跨度等

下面的例子就變得很麻煩：

outer > a { color: orange; }

不會的風格：

<div class="outer"><p><a>Link</a></p></div> 
<div class="outer"><strong><a>Link</a></strong></div> 
<div class="outer"><ul><li><a>Link</a></li></ul></div> 
<div class="outer"><table><tr><td><a>Link</a></td></tr></table></div> 
...

我需要找一些其他的方式

在inner中打破層次結構，但沒有明確定義重置。
限制外部樣式的範圍在inner處停止。

這可能嗎？請注意，重新排列我的HTML結構在目前的情況下是不可能的。

來源

2012-11-09 Lazlo

既然你說重新安排你的HTML是不可能的，'.inner'保證是'.outer的孩子'只有，而不是嵌套在其他地方？ – BoltClock

@BoltClock：不好意思，'.inner'可能出現在'.outer'之外。對不起，這些名字的確有誤導性。 – Lazlo

是CSS3選擇適合您的選項？如果是的話，可能這一招可以幫助：

CSS：

.outer>:not(div) a { color: orange; }

編輯：

.outer > a, .outer > :not(.inner) a { color: orange; }

jsBin演示

來源

2012-11-09 16:29:34

這確實有不造型的缺點，說'

Link

'，不是嗎？ – Lazlo

'.outer>：not（.inner）'將適用於沒有'.inner'類的'.outer'的所有直接子節點。 [演示]（http://jsfiddle.net/kjM6y/）。測試Chrome 22，IE 9，FF 13. –

@RoddyoftheFrozenPeas，不錯，但如果'.outer' div包含多個元素？應該選擇標題還是段落？ –

可以使用:not選擇：

.outer > *:not(.inner) *

來源

2012-11-09 16:29:06

回答

相關問題