嵌套的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样式

回答

相关问题