css - 在表格中输入 TAG，CSS 类根本不起作用

Question

我正在创建一个复杂表单，玩家将使用它通过数据库保存自己的个人 Angular 色表。为此，我使用了很多输入标签，对于布局，我使用表格来帮助我以正交方式轻松设置它。

对于输入，我使用修改其高度、宽度和文本对齐的类。

HTML

<div id="a_ability" class="advanced">
  <h3>Advanced</h3>
    <table id="tab02" width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <th scope="col">Ability</th>
        <th scope="col">Temp Value</th>
        <th id="tab02" scope="col">Bonus</th>
        <th scope="col">Magic Obj</th>
      </tr>
      <tr>
        <td>Strenght</td>
        <td><input type="text" name="temp_str" class="50x50"></td>
        <td><input type="text" name="bonus_str" class="50x50"></td>
        <td><input type="text" name="mag_str" class="50x200"></td>
       </tr>
       <tr>
         <td>Dexterity</td>
         <td><input type="text" name="temp_dex" class="50x50"></td>
         <td><input type="text" name="bonus_dex" class="50x50"></td>
         <td><input type="text" name="mag_dex" class="50x200"></td>
        </tr>
   </table>
 </div>

CSS

.50x50 {
height: 50px;
width: 50px;
text-align: center;
}
.50x200{
height: 50px;
width: 190px;
text-align: left;
padding-left: 10px;
}

这样的结果就像类根本不应用在标签上。维度是默认维度，只有当我为每个输入应用一个 ID(工作将不可能很长)或有时，如果我应用 !important 属性，我才能应用(但只能使用一些 css 规则)。

我正在开发 Dreamweaver(如果您了解该程序)，当我在“设计 View ” 时没有启用“实时”选项，一切似乎都很好, 但是当我把设计 View 放在输入上时 格式错误。

我检查过:

• 我没有任何css 冲突(例如一个规则覆盖另一个规则)
• 我已经检查了 Chrome 中的“检查”(例如)，输入的宽度为 183px，显然不知从何而来

它可能是浏览器的一些用户代理样式表吗？因为当我在 Chrome 中打开检查元素时，有这一行:

width: 84px;
   .advanced table tr td - 50px

它从 css 获取 50px，但它从哪里获取 84px？该值根本没有规则!

我该如何解决这个问题？

我添加更多信息

这是 JSFiddle 链接 link并且您可以看到它无法处理输入的样式。我做错了什么？

Answer 1

不要创建以数字开头的 class 或 id...

用额外的 i 查看你的 fiddle (字母无关紧要)
<强> http://jsfiddle.net/Sr9Vx/1/

编辑:
我刚刚看到 @Trey 在他的评论 (Which characters are valid in CSS class names/selectors?) 中给你的链接，在那里你可以找到一些解释和链接的原因，甚至更好的链接是官方引用。

例子:
http://www.w3.org/TR/2003/WD-css3-syntax-20030813/#characters
http://www.w3.org/TR/CSS21/syndata.html#value-def-identifier

祝你的元素好运。