CSS未应用于div标签

Question

我遇到一个小问题，一个 div 标签无法使用我为其设置的 CSS 样式。

我注意到在 Firefox 和 Chrome 中查看该元素时，有一个 html 元素包含了 div 标签，并且正确应用了 CSS 样式。然而，我看另一个元素，虽然它的 html 代码几乎相同，但却没有应用 CSS 样式。

以下是一个正常工作的带有 div 标签的 html 代码：

<tr>
        <td class="style1">
            <label><div ID="Login">Login:</label>
        </td>
        <td>
            <input class="login" id="loginpassword" type="text" name="username"     
maxlength="75">
            </div>
        </td>
    </tr>

这是登录密码ID的CSS：

#loginpassword {width:150px;}

这是我的第二段HTML代码片段（没有应用CSS的那一段）：

<tr>
        <td class="style1">
            <label><div ID="Password">Password:</label>
        </td>
        <td>
            <input class="login" id="loginpassword2" type="password" name="password" 
maxlength="75">
            </div>
        </td>
    </tr>

以下是登录密码2 ID 的 CSS：

#loginpassword2 {width:150px;}

它们几乎完全相同，但是loginpassword2的ID没有应用CSS，而loginpassword则应用了CSS。奇怪。我不明白为什么一个有效而另一个无效。

有任何线索吗？如果需要更多信息，请告诉我。

感谢您的回复。

- steve02a

---

看起来你没有尝试将任何CSS应用到div标签。 - Explosion Pills

你的HTML格式不正确。 - Musa

我正在将CSS应用于表单框中<input>字段内的ID以设置宽度。也许这不是在框（用于用户名/密码）上应用宽度的最佳方法。 - steve02a

上面那段HTML...是的，我知道它很混乱。我得回过头来抽时间清理一下它。现在，我只是试图让这两个框在所有浏览器中显示相同的宽度。 - steve02a

Answer 1

首先：

<td class="style1">
    <label><div ID="Login">Login:</label>
</td>
<td>
    <input class="login" id="loginpassword" type="text" name="username" maxlength="75">
    </div>

这是格式极差的HTML。你不能在一个 中打开一个

标签，并在另外一个 中关闭它。

考虑验证HTML：http://validator.w3.org/#validate_by_input+with_options 此外，你还为两者使用了相同的类名login，那么为什么不利用这一点呢，因为你正在以相同的方式对它们进行样式设置？

.login {width:150px;}

那将影响所有具有“login”类的元素。

---

进一步阅读：

CSS ID和类

• 查看Jonathon Sampson在回答CSS ID vs Class中的示例。
• http://css-tricks.com/the-difference-between-id-and-class/

有效的HTML

• http://www.leemunroe.com/how-important-is-valid-html-web-standards/

- Jace

---

闭合标签</div>对应于开放标签<div>：'<label><div ID="Password">密码：</label>'现在看来，我把</div>放错了位置。 - steve02a

谢谢！使用您建议的方法非常完美。现在我会把代码中所有这些无用的东西清理干净。 - steve02a

验证HTML - 是的，我必须这样做。感谢Jonathon Sampson提供的链接。我会研究一下。至于登录类 - 整个站点中只有一个，所以我可以使用您的建议。非常感谢您的帮助和大家在这里的帮助。 - steve02a

Answer 2

您可以像这样更改您的HTML布局

HTML

<table>
<tr>
<td class="style1">
<label id="lbllogin" runat="server">Login:</label>
</td>
<td>
<input class="login" id="loginpassword" type="text" name="username"     
maxlength="75" />
</td>
</tr>
</table>
<br>
<table>
<tr>
<td class="style1">
<label id="lblpwd" runat="server">Password:</label>
</td>
<td>
<input class="login" id="loginpassword2" type="password" name="password" 
maxlength="75" />
</td>
</tr>
</table>

CSS

#loginpassword {width:150px;}

#loginpassword2 {width:150px;}

希望这对你有用。

- Rahul

Answer 3

应用 CSS 样式时，应该优先使用类选择器而非 ID 选择器。

- user2289659

---

我一直以为你不能将CSS应用于类 - 但是，哎呀，我学到了可以。 很好知道。 谢谢。 - steve02a

Answer 4

做一件事。只需从两个输入标签中删除class="login"即可。

- salathia