Html 将 CSS 样式应用于 <div>
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6612453/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Apply CSS style to <div>
提问by photo_tom
My problem is with the below html
我的问题是下面的 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>
When the user selects the input field, I add class "curFocus" to the outer div via some javascript to highlight both label and the input field.
当用户选择输入字段时，我通过一些 javascript 将类“curFocus”添加到外部 div 以突出显示标签和输入字段。
My css is -
我的 css 是 -
.editor-container {
border: thin solid #444444;
display: table; width: 100%;
}
.editor-row {
width: 100%; display: table-row;
}
.editor-label {
padding-left: .4em; width: 40%;
}
.editor-label, .editor-field {
padding-right: .4em; padding-bottom: .2em; padding-top: .2em;
display: table-cell;
}
.curFocus {
border: 2px solid #05365b;
background-color: #d3e5f2;
margin: 3px; padding: 3px;
}
My problem is that while using debuggers in Chrome 12 and IE9, they both show the border settings being applied to the outer div. But, when viewing the form, neither browser display's the specified border. All other css settings work correctly. I also tried changing definition of ".curFocus" to ".curFocus div". But this applied the style to each of the nested div's also, but did display borders on all of the divs.
我的问题是，在 Chrome 12 和 IE9 中使用调试器时，它们都显示了应用于外部 div 的边框设置。但是，在查看表单时，两个浏览器都没有显示指定的边框。所有其他 css 设置都能正常工作。我还尝试将“.curFocus”的定义更改为“.curFocus div”。但这也将样式应用于每个嵌套的 div，但确实在所有 div 上显示了边框。
While I'm not a CSS expert, it is not obvious why this shouldn't work.
虽然我不是 CSS 专家，但不清楚为什么这不可行。
Edit Here is jsfiddle link - http://jsfiddle.net/photo_tom/KmsF5/1/. While testing this it does work correctly in IE9 if in IE7 compatibly mode. Otherwise, it does not display correctly. Sorry about not including link, still getting use to fact that jsfiddle even exists.
编辑这里是 jsfiddle 链接 - http://jsfiddle.net/photo_tom/KmsF5/1/。在测试时，如果在 IE7 兼容模式下，它在 IE9 中可以正常工作。否则无法正确显示。很抱歉没有包含链接，仍然习惯于 jsfiddle 甚至存在的事实。
采纳答案by hughes
Well, I can tell you what's causing it, but I can't tell you why. Elements with display: table-row;can't have a border applied to them. You can apply the border to the table-cellchildren of the .curFocuselement, but not the table-rowitself.
好吧，我可以告诉你是什么导致了它，但我不能告诉你为什么。元素display: table-row;不能应用边框。您可以将边框应用于元素的table-cell子.curFocus元素，但不能应用于元素table-row本身。
Again, no idea why this silly rule exists, but you can fix your problem with some CSS:
同样，不知道为什么会存在这个愚蠢的规则，但是您可以使用一些 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 */
}
回答by brenjt
I think your problem is your display type on the .editor-row. display: table-row;Remove that and the problem will go away. Plus I don't think that all browsers support display: table-row;very well.
我认为您的问题是您在 .editor-row 上的显示类型。display: table-row;删除它，问题就会消失。另外我不认为所有浏览器都支持display: table-row;得很好。
回答by Briguy37
You might need a higher CSS specificity, as it is ambiguous which CSS styles will apply with the current definitions.
您可能需要更高的 CSS 特异性，因为哪些 CSS 样式将应用于当前定义是不明确的。
Try div.curFocusrather than .curFocus divfor the class definition to apply the style to the div with that class name rather than its divchildren.
尝试div.curFocus而不是.curFocus div让类定义将样式应用于具有该类名称而不是其div子项的 div 。
