Это проблема наследования CSS?

Question

Это мой css:

    .sub-content-border {
 background-image:    url(/images/borders/sub-content/top.gif);
 background-repeat:   repeat-x;
 background-position: top;
}
.sub-content-border div {
 background-image:    url(/images/borders/sub-content/bottom.gif);
 background-repeat:   repeat-x;
 background-position: bottom;
}
.sub-content-border div div {
 background-image:    url(/images/borders/sub-content/left.gif);
 background-repeat:   repeat-y;
 background-position: left;
}
.sub-content-border div div div {
 background-image:    url(/images/borders/sub-content/right.gif);
 background-repeat:   repeat-y;
 background-position: right;
}
.sub-content-border div div div div {
 background-image:    url(/images/borders/sub-content/top-left.gif);
 background-repeat:   no-repeat;
 background-position: left top;
}
.sub-content-border div div div div div {
 background-image:    url(/images/borders/sub-content/top-right.gif);
 background-repeat:   no-repeat;
 background-position: right top;
}
.sub-content-border div div div div div div {
 background-image:    url(/images/borders/sub-content/bottom-left.gif);
 background-repeat:   no-repeat;
 background-position: left bottom;
}
.sub-content-border div div div div div div div {
 background-image:    url(/images/borders/sub-content/bottom-right.gif);
 background-repeat:   no-repeat;
 background-position: right bottom;
 padding:             18px;
}
.sub-content-border div div div div div div div div {
 background-image: url(/images/blank.gif);
 padding:          0px;
}

Это мой HTML:

<div class="sub-content-border"><div><div><div><div><div><div><div><div>
Test
<div class="sub-content-border"><div><div><div><div><div><div><div><div>
Test
</div></div></div></div></div></div></div></div></div>
</div></div></div></div></div></div></div></div></div>

Однако вместо получения рамки внутри рамки, внутренняя рамка не существует (см. Изображение: i47.tinypic.com/kcihcy.jpg)

Кто-нибудь знает почему?

Однако, если я сделаю грязный трюк и добавлю CSS в стилях, он обнаружится:

    <div class="sub-content-border"><div><div><div><div><div><div><div><div>
Test
<div class="sub-content-border" style="background-image: url(/images/borders/sub-content/top.gif); background-repeat: repeat-x; background-position: top;">
<div style="background-image: url(/images/borders/sub-content/bottom.gif); background-repeat: repeat-x; background-position: bottom;">
<div style="background-image: url(/images/borders/sub-content/left.gif); background-repeat: repeat-y; background-position: left;">
<div style="background-image: url(/images/borders/sub-content/right.gif); background-repeat: repeat-y; background-position: right;">
<div style="background-image: url(/images/borders/sub-content/top-left.gif); background-repeat: no-repeat; background-position: left top;">
<div style="background-image: url(/images/borders/sub-content/top-right.gif); background-repeat: no-repeat; background-position: right top;">
<div style="background-image: url(/images/borders/sub-content/bottom-left.gif); background-repeat: no-repeat; background-position: left bottom;">
<div style="background-image: url(/images/borders/sub-content/bottom-right.gif); background-repeat: no-repeat; background-position: right bottom; padding: 18px;">
<div style="background-image: url(/images/blank.gif); padding: 0px;">
Test
</div></div></div></div></div></div></div></div></div>
</div></div></div></div></div></div></div></div></div>

см. Изображение: http://i46.tinypic.com/2dh9ut2.jpg

Answer 1

использование div > div > div и т. Д.

div div будет соответствовать каждому div ниже другого div