Question

我有一点困难时间让CSS规则为我工作。我认为它与规则的应用顺序有关，但我希望你们中的一个人无疑比我更熟悉HTML和CSS，可以帮助我。

基本上我的目标是在当前聚焦的文本输入（文本框和textareas以及下拉菜单）周围放置彩色边框。 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" />&nbsp;
                        Checkbox
                </td>
            </tr>
            <tr>
                <td>
                    <input type="button" class="button" value="Button" />
                </td>
            </tr>

        </table>
    </form> 
</body>
</html>

这是可行的测试页面。注意我在Web服务器上有css文件，但它只能在内部访问。我考虑过做jquery，但我想这会更容易。显然不是。

再次感谢。如果需要，我仍然可以在以后发布大页面的HTML。

再次编辑：我正在查看标记。在W3C网站上似乎没问题，但也许我错过了一些东西。如果有人感兴趣，这里是txt文件中较大页面HTML的链接。 http://cloudstor.pogoplug.com/share/xGQzP43X9FsEq5Z1XqafYQ/LNtISrGuLxJsaxhZ3iPZUw/form.txt

我可能还应该提到我之前发布的CSS是唯一正在使用的CSS。此外，虽然它没有多大帮助，但CSS可以在Chrome和Firefox中使用。 IE是唯一的坚持（那里的大惊喜......）

再次感谢所有链接和评论。我决心弄清楚这一点。

Answer 1

在没有看到完整标记的情况下，我最好的猜测是你在页面上有无效的标记（即未封闭的标签，无效的字符），这可能导致样式和页面结构破坏，有时浏览器或类声明不同被覆盖在样式表中的其他位置。焦点选择器有效，并且不需要jquery。

Answer 2

我可以考虑两件可以打破选择器的事情：

另一个样式表/样式标签具有相同的选择器+属性，并且还包含!important，因此，您无法看到自己的css。
HTML页面上的标记无效。花一点时间，然后使用W3C Validation service验证它。

Answer 3

就像Ryet和Nadav所说，你可能有无效的HTML标记。但无效的html标记不是导致问题的唯一因素，无效的CSS也是如此。无效的css可能涉及缺少括号，缺少分号，滥用id和类等等。您可以使用此网站http://jigsaw.w3.org/css-validator/

找到无效的css标记

Answer 4

想出来。而且我觉得很傻。评论打破了我的页面。

我更像是一个C，C ++，C＃有点家伙。我已经有一段时间了，因为我从头开始做了很多直接的HTML。我试图创建一个模板，我们可以使用它来建立我们所有的HTML表单。在页面的最顶部，我有一个块注释，解释了模板的用途（在代码文件顶部放置块注释并解释它的作用并不常见，对吧？）

长话短说我拿出了我的HTML的一些部分，直到剩下的只是一个表，一行，一列和文本框。如果仍然没有奏效，我想考虑一下这个评论。评论是页面上的第一件事，在

之上

<!DOCTYPE ...

感谢您的帮助。如果在HTML中使用评论时，任何人都有任何提示或指向最佳实践的链接，我将非常感激。

再次感谢您的所有建议。

CSS规则未在不同页面上应用相同的规则

4 个答案: