css 使属性失效,CSS样式前加数字，则所定义的所有属性失效

一般来说，CSS样式的名称用字母表示，也可以在两个单词之间用短横杠(-)连接起来，当然有时候也会用到数字，数字未加到名称前面还没有问题，如果加到名称前面，则CSS样式中定义的所有属性失效。当我第一次遇到这种问题时，百思不得其解，一直弄不明白为什么CSS样式没有发挥作用，反复检查CSS样式定义没有问题，后来尝试把样式前面的数字去掉，CSS样式又发挥了作用，原来是CSS样式名称前不能用数字。

对于这样的问题，通常很不好排查，在名称中用数字是常有的事，谁也不会想到名称中到处可用数字仅前面不能用；不过，这个问题也简单，遇到一次以后就知道了。

一、普通的CSS样式前加数字，所有属性失效实例

html代码：

CSS样式前加数字，则所定义的所有属性失效

CSS样式：

.3cssno{color:Blue; width:350px; height:30px; border:1px solid #929292; line-height:28px; padding-left:8px;}

效果图：

CSS样式前加数字，则所定义的所有属性失效

CSS样式中定义文字为蓝色，而效果图中显示文字仍然为黑色，给 div 定义了边框也没有显示，说明CSS样式作用失效；把CSS样式前的数字去掉，作用又恢复：

html代码：

去掉CSS样式前的数字，则CSS样式作用恢复

CSS样式：

.cssno{color:Blue; width:350px; height:30px; border:1px solid #929292; line-height:28px; padding-left:8px;}

效果图：

去掉CSS样式前的数字，则CSS样式作用恢复

二、CSS样式前有html元素限制的样式名称前加数字，所有属性失效实例

html元素：

• li的CSS样式前加数字，则所定义的所有属性失效
• li的CSS样式前不加数字，则所定义的所有属性有效
• 把数字放到CSS样式的后面，样式仍然有效

CSS样式：

.ulcss{overflow:hidden;list-style:none;}

.ulcss li{line-height:24px; width:380px; height:30px; border:1px solid #929292; padding-left:8px;}

.ulcss li.2cssing{color:Red;}

.ulcss li.cssing{color:Fuchsia; margin-top:8px;}

.ulcss li.cssing2{color:Orange; margin-top:8px;}

效果图：

li的CSS样式前加数字，则所定义的所有属性失效

li的CSS样式前不加数字，则所定义的所有属性有效

把数字放到CSS样式的后面，样式仍然有效

从效果图中可以看出，两个li的CSS样式，其中前面加数字的样式把文字颜色定义为红色，但文字仍然是黑色；而前面没有加数字的样式，把文字颜色定义为粉红色，文字显示为粉红色，说明CSS样式发挥了作用；把数字放到样式名称的最后，样式也有效；此外，把数字放到样式名称的中间同样有效。