我需要限制的CSS樣式層疊

我有以下的html：我需要限制的CSS樣式層疊

<div class="canvas red"> 
    <div> 
     <div class="canvas blue"> 
      <div> 
       has blue border 
       <div class="canvas red"> 
        ... 
        <div> 
        MUST HAVE RED BORDER 
        </div> 
       </div>   
      </div> 
     </div> 
    </div> 
</div>

這裏是CSS代碼：

div.canvas div { 
    border-style: solid; 
    border-width: 1px; 
} 

div.canvas.red div { 
    border-width: 4px; 
    border-color: red; 
} 

div.canvas.blue div { 

    border-color: blue; 
}

的問題是3：

的最裏面的div.canvas.red div收到blue邊框，因爲它在層次結構中位於div.canvas.blue之內。我需要停止這個CSS繼承，以便最內層的div.canvas.red div不會被div.canvas.blue扭曲。
由於動態插入網頁中的組件，我無法控制上面的div的嵌套。我可以處理各種嵌套場景。
我不能改變的CSS結構和它被施加的方式 - 等canvas和red/blue等是分開的類名，代替具有canvas_red和canvas_blue爲不同的類。

我不打算支持IE6，因此我可以使用>令牌我的CSS。但是，我無法恰當地利用它。如果您更適當地更改我的代碼，我會更好。

來源

2012-02-19 Ivaylo Slavov

您無法停止CSS繼承。但是你可以覆蓋它。使用！重要是一種方式。 – Jawad 2012-02-19 20:56:58

@Jawad：這是無稽之談。重寫和繼承是兩個完全不同的東西。 – BoltClock 2012-02-19 21:07:50

@Jared Farrish：這個問題與嵌套元素無關，但我看到代碼已經改變，所以我刪除了我的答案。 – BoltClock 2012-02-19 21:13:53

我不打算支持IE6，因此我可以使用>令牌我的CSS。但是，我無法恰當地利用它。如果您更適當地更改我的代碼，我會更好。

這應該是你在找什麼：

div.canvas > div { 
    border-style: solid; 
    border-width: 1px; 
} 

div.canvas.red > div { 
    border-width: 4px; 
    border-color: red; 
} 

div.canvas.blue > div { 
    border-color: blue; 
}

請記住，邊框樣式不默認由從父母的子元素繼承。用後代選擇器看到的行爲是級聯的簡單效果（由於選擇器的特殊性），以及後代選擇器本身的特性以查看任何級別的嵌套。

孩子選擇>不增加特異性，但它確實限制嵌套深度只有一級（即div.canvas.blue > div不能<div class="canvas blue"><div><div>的最裏層元素相匹配），這是爲什麼造成風格會有所不同。

來源

2012-02-19 21:24:46 BoltClock

似乎足夠直接：http://jsfiddle.net/4LgaA/6/ – 2012-02-19 21:28:30

+1不是「廢話」 – Jawad 2012-02-19 21:29:17

謝謝，現在它像一個魅力 – 2012-02-19 21:36:41

 
div.canvas, 
div.canvas div { 
    border-style: solid; 
    border-width: 1px; 
} 

div.canvas.red { 
    border-width: 4px; 
    border-color: red; 
} 

div.canvas.blue { 
    border-color: blue; 
}

來源

2012-02-19 21:03:55 okyanet

我需要限制的CSS樣式層疊

回答

相關問題