为什么CSS类声明不适用于标记的<div>？

Question

我想创建一个干净的CSS编码,其中为特定属性创建类,例如,".20mleft"类为20px边距 - 应用的html元素.我希望div的宽度为620px,另一个div的宽度为220px.两个div都向左浮动,620px宽度div的右边应该有20px的边距.这两个div都包含在容器类div中.这些是代码.

HTML:

<div class="container">
  <div class="8cols fleft 20mright" style="border:1px #333 solid;"><p>This is the Main Content</p></div>
  <div class="3cols fleft" style="border:1px #333 solid;"><p>This is theSidebar</p></div>
</div>

我正在使用12列960网格BTW.

CSS:

/** FLOAT OPTIONS **/
.fleft{float:left;}

/** BOX ELEMENTS **/
.container{width:940px; margin:0 auto;}
...
.3cols {width: 220px;}
...
.8cols {width: 620px;}

/** MARGIN OPTIONS **/
...
.20mright{margin-right:20px;}

问题: .fleft类的属性是唯一可以工作的属性..8cols,.3cols和.20mright类的属性无法应用.我检查了Firefox的Inspector,除了.fleft类声明外,我看不到属性.似乎div的宽度由其内部的内容控制.

有关更好的说明,请下载以下图片:

样本图片

PS忽略上面的标题.这是我的项目,以防你想知道.

请尽快帮助我.非常感谢.

Answer 1

CSS语法要求用作标识符的类名以字母,下划线或短划线开头.

但是,您可以使用转义来解决此问题.例如,您可以将"8cols"转义为:

.\38 cols { width: 620px; }

在CSS文件中.就个人而言,这似乎很快就会变丑.这是CSS的引用工具.

说特殊字符在类名和"id"值中是"无效的"是不正确的.他们不是,但他们必须得到特别对待.规则适用于标识符,但类名和"id"值都不需要是标识符.