嵌套的div應該有2種差異CSS樣式

我有2個div的嵌套，都有嵌套的div應該有2種差異CSS樣式

#x{ 
width:400px; 
height:400px; 
background-color:#fff; 
color:#000 
} 

#y{ 
width:200px; 
height:200px; 
background-color:#000; 
color:#ccc; 
} 


<div id="y"><div id="x">Here lies a x value</div></div>

我想#X #Y，並有單獨的CSS屬性，但事實並非如此，覆蓋#x倍#y值

任何幫助表示讚賞。

感謝讓

來源

2010-04-14 X10nD

你有兩個#y類。這是你的意圖嗎？ – 2010-04-14 07:58:24

對不起，編輯是#x和#y – X10nD 2010-04-14 07:59:44

你的嵌套div比父母寬。 – Kyle 2010-04-14 08:03:40

#y{ 
width:400px;<-- add px. 
height:400px; 
background-color:#fff; 
color:#000 
} 

#x{ <--changed to X, it was y 
width:200px; 
height:200px; 
background-color:#000; 
color:#ccc; 
}

此外，當您id一個div到x它會帶你在#x detup屬性。

來源

2010-04-14 08:02:47 Kyle

我知道它會採用#x的屬性，但我希望divs擁有單獨的屬性，這可能嗎？ – X10nD 2010-04-14 08:07:43

是的，只需在CSS中設置它，就是這麼做的。如果你想有更多不同的風格，例如'border'，那麼告訴'＃x'或'＃y'有一個邊框，它會的，但另一個不會。你需要告訴嵌套的div每一個你想要的東西，或者據我所知它會從大多數屬性的父類繼承。 – Kyle 2010-04-14 08:11:32

-1

特異性！由於你的兩個聲明具有相同的特性，所以在CSS中最後一個聲明是一個被尊重的聲明。爲了增加內部目標的特殊性，嘗試：

#y #x{ 
width:400; 
height:400px; 
background-color:#fff; 
color:#000 
} 

#y{ 
width:200; 
height:200px; 
background-color:#000; 
color:#ccc; 
}

Here's a cracking article on the subject。

來源

2010-04-14 08:09:59 graphicdivine

我懷疑這個特殊性必須對它做任何事情。對於一個ID爲「x」的div的聲明，*從不*應用於另一個ID爲「y」的div（不包括繼承的情況，與'color'屬性一樣，但恕我直言，問題針對尺寸） – Boldewyn 2010-04-14 08:12:09

@Boldewyn你是如此的正確。我會穿上我的大衣。 – graphicdivine 2010-04-14 08:25:09

其不針對邊界或尺寸，但顏色也。假設我在#y中具有不透明度，並且我的div設置爲

。但是我不希望#x中的不透明度發生變化 – X10nD 2010-04-14 08:37:29

它們具有單獨的屬性。只是嵌套的x div在y div的前面，所以y div被遮住了。嘗試將＃overflow: hidden;添加到#y，您會看到它將#x限制在它的佔用空間。

來源

2010-04-14 08:16:01 kingjeffrey

@kingjeffrey無法正常工作 – X10nD 2010-04-14 08:35:13

白色div背景與白色頁面背景融合在一起。嘗試將邊框應用於#x以查看其邊界。或者將頁面背景更改爲黃色。你也可以在#x上應用一個頂部和左邊界來看到一些暴露的#y。以下是一個示例：http://test.kingdesk.com/nested-widths.html如您所見，#y維護它的樣式（在#x後面） – kingjeffrey 2010-04-14 08:45:30

嵌套的div應該有2種差異CSS樣式

回答

相關問題