Html 将CSS样式应用于<；部门>；

我的问题是下面的html

<div class="editor-container">
   <div class="editor-row curFocus">
       <div class="editor-label">
           <label for="FirstName">First Name</label>
       </div>
       <div class="editor-field">
          <input class="text-box single-line valid" id="FirstName" 
                name="FirstName" type="text" value="Nancy" maxlength="20">
       </div>
   </div>
</div>

我的问题是，在Chrome 12和IE9中使用调试器时，它们都会显示应用于外部div的边框设置。但是，在查看表单时，浏览器都不会显示指定的边框。所有其他css设置都正常工作。我还尝试将“.curFocus”的定义更改为“.curFocus div”。但这也将样式应用于每个嵌套的div，但在所有div上都显示了边框

虽然我不是CSS专家，但不清楚为什么这不起作用

---

编辑 这里是JSFIDLE链接-。在测试这一点时，如果在IE7兼容模式下，它确实在IE9中正常工作。否则，它将无法正确显示。

---

很抱歉没有包含链接，仍然习惯于JSFIDLE甚至存在的事实。

您可能需要更高的CSS专用性，因为当前定义将应用哪些CSS样式是不明确的

---

请尝试

div.curFocus

而不是

.curFocus div

，以使类定义将样式应用于具有该类名而不是其

div

子类的div。

我认为您的问题在于.editor行上的显示类型<代码>显示：表格行删除它，问题就会消失。另外，我不认为所有浏览器都支持

display:table-row很好。
好吧，我可以告诉你是什么原因造成的，但我不能告诉你为什么。显示
的元素：表行不能对其应用边框。您可以将边框应用于
.curFocus
元素的
表格单元格
子元素，但不能应用于
表格行
本身

同样，不知道为什么会存在这个愚蠢的规则，但您可以使用一些CSS解决您的问题：

.curFocus {
   background-color: #d3e5f2;
   margin: 3px; padding: 3px;
}

.curFocus>div {
   border: 2px solid #05365b;
   border-width: 2px 0px;  /* top and bottom border for all the table-row's immediate children (table-cells) */
}

.curFocus>div:first-child {
    border-width: 2px 0px 2px 2px; /* left border for the leftmost table-cell */
}

.curFocus>div:last-child {
    border-width: 2px 2px 2px 0px; /* right border for the rightmost table-cell */
}

请参见
给我们一个JSFIDLE或其他演示。-编辑这个，让我们see@ppumkin-它似乎工作正常，但当我打开我的链接时（和你一样），我发现虽然它似乎工作，但它实际显示的是class=“.editor container”最外层的div，可能是因为OP已经在他的帖子中介绍了这一点，而这不是问题所在，他没有使用
.curFocus div
@Wesley Murch-来自提问：“我还尝试将“.curFocus”的定义更改为“.curFocus div”。“这会将样式应用于curFocus元素的子元素，而不是curFocus元素，因为这似乎是他想要做的。我不知道你为什么要ping我，我与此无关，只是想解释一下其他人的反对票。再次阅读问题和代码。你测试过你的解决方案吗？请随意更正或删除您的答案。我认为这个解决方案不需要更改或更新，因为它指出了hughes在测试中的一个缺陷，当时他尝试了错误的CSS选择器以增加特异性。他自己说他是CSS新手，所以我想我会指出这是一个潜在的问题。显然，解决方案与
display:table行有关相反，但我在看到答案之前输入了这个。哦，好吧……（叹气）……我不得不同意你的说法，即这条规则似乎很愚蠢。
.curFocus {
   background-color: #d3e5f2;
   margin: 3px; padding: 3px;
}

.curFocus>div {
   border: 2px solid #05365b;
   border-width: 2px 0px;  /* top and bottom border for all the table-row's immediate children (table-cells) */
}

.curFocus>div:first-child {
    border-width: 2px 0px 2px 2px; /* left border for the leftmost table-cell */
}

.curFocus>div:last-child {
    border-width: 2px 2px 2px 0px; /* right border for the rightmost table-cell */
}