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

【问题标题】：Why CSS class declaration isn't working on a tagged <div>?为什么 CSS 类声明不适用于标记的 <div>？
【发布时间】：2014-01-23 23:38:06
【问题描述】：

我想创建一个干净的 CSS 编码，其中为特定属性创建类，例如".20mleft" 类，用于向 html 元素应用 20px margin-left。我希望一个 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 网格顺便说一句。

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

附：忽略上面的标题。如果您想知道，这是我的项目。

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

【问题讨论】：

请做一个小提琴
CSS style not recognizing numbers的可能重复

标签： css class html declaration

【解决方案1】：

CSS 语法要求类名用作标识符以字母、下划线或破折号开头。

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

.\38 cols { width: 620px; }

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

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

【讨论】：

为什么需要一个小提琴？

【解决方案2】：

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

【讨论】：

【解决方案3】：

Here the best answer related

类名称必须以下划线(_)、破折号(-)或letter(a–z)开头，并且长度必须至少为2个字符。

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

【讨论】：