我很难让 CSS 规则为我工作。我相信这与应用规则的顺序有关，但我希望你们中的一位无疑比我更有经验的 HTML 和 CSS 可以帮助我。
基本上我的目标是在当前聚焦的文本输入(文本框和文本区域以及下拉菜单)周围放置一个彩色边框。 CSS 相当短(我认为...)但是给我带来麻烦的规则在最底部(.userinput:focus)
body
{
font-family: Arial;
}
.header
{
color: #004c85;
font-family: Arial;
font-size: 14px;
font-weight: bold;
vertical-align: middle;
padding-bottom: 5px;
}
.titleCell
{
background-color: #004c85;
font-family: Arial;
color: White;
font-size: 12px;
font-weight: bold;
text-align: left;
padding: 2px 2px 2px 2px;
}
.subtitleCell
{
background-color: #aaaaaa;
font-family: Arial;
color: #092548;
font-size: 12px;
font-weight: bold;
text-align: left;
padding: 2px 2px 2px 2px;
}
.normalCell
{
background-color: #f1f1f1;
font-family: Arial;
color: #092548;
font-size: 9pt;
font-weight: bold;
text-align: left;
padding: 1px 2px 1px 2px;
}
.errorText
{
font-family: Arial;
color: #d01d00;
font-size: 9pt;
font-weight: bold;
text-align: left;
}
.button
{
font-size: 12px;
color: #f1f1f1;
background-color: #004c85;
}
.userinput:focus
{
border: 2px ridge #00a2ff !important;
}
我创建了一个只有一个表的简单页面，它运行良好(这里的目标浏览器是 IE)。 当我使用多个表和 div 创建一个大页面时，此规则似乎不再适用于 IE。阅读后，我在规则中添加了 !important，但它并没有帮助我。我下载了 Firebug，但同一页面在 Firefox 中看起来很好(出现边框)。
此时任何提示都将不胜感激。
编辑:很遗憾，我无法发布指向整个内容的链接。下面是我成功的测试页。我或许可以发布指向更大 HTML 的链接，但必须下载并在本地运行。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Demo Page</title>
<link href="base.css" rel="Stylesheet" type="text/css" />
</head>
<body>
<form name="FormName" method="post" style="text-align: center">
<table cellpadding="0" cellspacing="0" width="900" border="0" style="text-align:left">
<tr>
<td class="header">
Header
</td>
</tr>
<tr>
<td class="errorText">
Error Text
</td>
</tr>
<tr>
<td class="titleCell">
Title Cell
</td>
</tr>
<tr>
<td class="subtitleCell">
Subtitle Cell
</td>
</tr>
<tr>
<td class="normalCell">
Normal Cell
</td>
</tr>
<tr>
<td class="normalCell">
<input type="text" class="userinput" size="25" />
</td>
</tr>
<tr>
<td class="normalCell">
<input type="checkbox" value="ON" />
Checkbox
</td>
</tr>
<tr>
<td>
<input type="button" class="button" value="Button" />
</td>
</tr>
</table>
</form>
</body>
</html>
这是运行正常的测试页。注意我在网络服务器上有 css 文件，但它只能在内部访问。我考虑过使用 jquery，但我认为这会更容易。显然不是。
再次感谢。如果需要，我仍然可以稍后发布大页面的 HTML。
再次编辑:我正在查看标记。在 W3C 网站上看起来不错，但也许我遗漏了一些东西。如果有人感兴趣，这里有一个链接到一个 txt 文件中的较大页面 HTML。 http://cloudstor.pogoplug.com/share/xGQzP43X9FsEq5Z1XqafYQ/LNtISrGuLxJsaxhZ3iPZUw/form.txt
我可能还应该提到我之前发布的 CSS 是唯一在使用的。此外，虽然它并没有多大帮助，但 CSS 在 Chrome 和 Firefox 中都有效。 IE 是唯一的坚持者(那里有很大的惊喜......)
再次感谢所有的链接和评论。我决心解决这个问题。
最佳答案
在没有看到完整标记的情况下，我最好的猜测是页面上有无效标记(即未闭合的标记、无效字符)，这可能会导致样式和页面结构损坏，有时浏览器之间会有所不同，或者您的类声明正在您的样式表中的其他地方被覆盖。焦点选择器有效，不需要 jquery。
关于html - CSS 规则在不同页面上的应用不一样，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11370249/