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>

以下是loginpassword 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＆amp;类

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

有效的HTML

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

Answer 2

将css应用于课程级别而不是id。

Answer 3

您可以更改您的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;}

希望它适合你。

Answer 4

做一件事。只需从两个输入标记中删除class =“login”

即可

CSS未应用于div标签

4 个答案: