html - 样式未应用于 div 而它位于不同的 div

Question

我有以下风格

.MapField {
    width:70px;
    height:70px;
}
.MapTab
{
    width:auto;
    height:auto;
}
div[worldTexture="1"] {
    background:url(../WorldTextures/dirt.jpg);
}

然后我有以下 html 片段

<div class="col-xs-9 MapTab">
  <div class="col-xs-6 MapField" worldTexture="1"/>
  <div class="col-xs-6 MapField" worldTexture="1"/>
</div>
<div class="col-xs-3"></div>

然后我希望 col-xs-6 的高度至少为 70px(以防屏幕尺寸允许)但它会导致 div 大小如 width:70px height:1px 将 .MapStyle 更改为具有 width 和 height !important 不会改变任何内容

另一方面，如果我按以下方式将 div 的用法更改为 table

td[worldTexture="1"] {
    background:url(../WorldTextures/dirt.jpg);
}

<table>
<tr class="col-xs-9 MapTab">
  <td class="col-xs-6 MapField" worldTexture="1"/>
  <td class="col-xs-6 MapField" worldTexture="1"/>
</tr>
<tr class="col-xs-3"></div>
<table>

它按预期工作，知道这里可能出了什么问题吗？

Answer 1

我认为那些 div 不应该是自闭合标签。

尝试

<div class="col-xs-9 MapTab">
  <div class="col-xs-6 MapField" worldTexture="1"></div>
  <div class="col-xs-6 MapField" worldTexture="1"></div>
</div>
<div class="col-xs-3"></div>