вложенные div должны иметь 2 стиля CSS

Question

У меня есть 2 вложенных div, оба имеют

#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

Любая помощь приветствуется.

Спасибо Jean

Answer 1

Специфичность!Поскольку ваши два объявления имеют одинаковую специфику, то, что стоит последним в CSS, это то, что соблюдается.Чтобы увеличить специфичность внутренней цели, попробуйте:

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

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

Вот статья по теме .

Answer 2

Они имеют индивидуальные свойства. Просто вложенный x div находится перед y div, поэтому y div скрыт. Попробуйте добавить overflow: hidden; к #y, и вы увидите, что он ограничивает #x своим размером.

Answer 3

#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 a div до x, он принимает свойства, которые вы устанавливаете в #x.