1

我很难让 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" />&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 是唯一的坚持者（那里有很大的惊喜......）

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

4

4 回答 4

1

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

  • 另一个样式表/样式标签具有相同的选择器+属性并且也包含!important，因此 - 你看不到你自己的 css。

  • 您的 HTML 页面上的标记无效。花点时间使用W3C 验证服务对其进行验证。

于 2012-07-06T22:18:17.553 回答
1

如果没有看到完整的标记，我最好的猜测是页面上的标记无效（即未关闭的标签、无效字符），这可能导致样式和页面结构损坏，有时在浏览器之间会有所不同，或者您的类声明被覆盖样式表中的其他地方。焦点选择器有效，不需要 jquery。

于 2012-07-06T22:14:45.883 回答
0

就像 Ryet 和 Nadav 所说的那样，您可能有无效的 html 标记。但是无效的 html 标记并不是唯一导致问题的东西，无效的 css 也是如此。无效的 css 可能涉及缺少括号、缺少分号、滥用 id 和类等等。您可以使用此站点http://jigsaw.w3.org/css-validator/找到无效的 css 标记

于 2012-07-06T22:19:25.867 回答
0

弄清楚了。而且我觉得很傻。评论打破了我的页面。

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

长话短说，我取出了我的 HTML 的点点滴滴，直到只剩下一个表格、一行、一列和文本框。当这仍然不起作用时，我考虑删除评论。评论是页面上的第一件事，在

<!DOCTYPE ...

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

再次感谢您的所有建议。

于 2012-07-07T15:37:01.120 回答