css样式命名导致样式“变异”的问题

今天调试了一个问题，给按钮设置样式，发现死活都只有部分生效，怎么调试都没用。后来修改了样式的名字就好了。

不带样式时是这样显示的（只关注其中的登陆按钮）：

<input type="submit" name="button" id="button" value="登　录"   tabindex="4">

给按钮加上样式，css中样式的名字为submit：

.submit{width:124px; height:40px; border:none; background:url(../elements/images/btn_1.gif) no-repeat 0 0; color:#fff; font:bold 14px/40px Arial, Helvetica, sans-serif; text-align:center; cursor:pointer;}

使用

<input type="submit" name="button" id="button" value="登　录" class="submit" tabindex="4">

这样设置，出现了部分效果，就像下面这样：

图片只显示一半，文字也位置不对，还不好看，怎么调都没用，不发生改变。

后来，改了下样式的名字就好了。

.submit_1{width:124px; height:40px; border:none; background:url(../elements/images/btn_1.gif) no-repeat 0 0; color:#fff; font:bold 14px/40px Arial, Helvetica, sans-serif; text-align:center; cursor:pointer;}

<input type="submit" name="button" id="button" value="登　录" class="submit_1" tabindex="4">

效果如下：

可见，给样式起名字时，不要太随意，否则会出现意想不到的后果。