CSS 未应用于 div 标签

Question

div 标签有一个小问题，因为它没有获取我为它准备的 CSS。

当我检查 Firefox 和 Chrome 中的元素时，我注意到了。我看到一个带有 div 标签的 html 元素，它正确地应用了 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>

这是 loginpassword2 ID 的 CSS:

#loginpassword2 {width:150px;}

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

有什么线索吗？如果您需要更多信息，请告诉我。

预先感谢您的回复。

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。你打不开 <div> <td> 内的标签并将其关闭在另一个 <td> 中.

考虑验证您的 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/