重复的CSS声明被浏览器剥离


Duplicate CSS Declarations Stripped By Browser(s)?

我有一个PHP应用程序,必须为它动态生成样式表。样式表有一个.php文件扩展名,但我通过header函数(PHP)将文件的Content-Type设置为text/css,然后创建适当格式的CSS以满足我的目的,并将此样式表包含在我的页面中。

我看到的问题是,当我通过我选择的任何浏览器工具(无论是Firebug、Chrome开发工具还是IE开发工具)查看CSS文件时,某些类声明都会丢失(从浏览器呈现的内容来看,这些类显然不存在)。当我检查文件的原始输出时(如中所示,将PHP CSS文件的地址放在浏览器中以查看原始文本),缺少的类声明确实存在。

缺少的通常是第二个(或第n个)类,该类指定相同的background-color值,但类名不同。

下面是一个具体的例子:

在原始输出中,我有以下两个类:

#draft-board div.pick.RB{
  background-color: #FFCC66;
}
#draft-board div.pick.1B {
  background-color: #FFCC66;
}

但在浏览器中,它只看到:

#draft-board div.pick.RB{
  background-color: #FFCC66;
}

为什么会这样?

下面是一个公共示例页面:http://www.phpdraft.com/public_draft.php?action=draftBoard&did=9

(以下是该页面的原始CSS输出:)http://www.phpdraft.com/css/draft_board_dynamic_styles.php

我发现了这个问题:CSS类名不能以数字开头,这就是为什么所有三个浏览器都无法识别CSS的原因——它们正确地遵循了CSS,而我没有!