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的宽度由其内部的内容控制。

要获得更好的解释，请下载以下图片：

Sample Picture

P.S。忽略上面的标题。这是我的项目，以防你想知道。

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

Answer 1

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

但是，您可以使用转义来解决此问题。例如，您可以将“8cols”转义为：

.\38 cols { width: 620px; }

在CSS文件中。就个人而言，这似乎很快就会变丑。 Here is a quote tool for CSS.

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

Answer 2

以数字字符开头的CSS类名无效。请阅读What characters are valid in CSS class selectors?

Answer 3

Here the best answer related

类名称必须以下划线(_)，短划线(-)或letter(a–z)开头，并且长度必须至少为2个字符。< / p>

-?[_a-zA-Z]+[_a-zA-Z0-9-]*

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

3 个答案: