未应用以数字开头的 CSS 类答案

【问题标题】：CSS class starting with number is not getting applied未应用以数字开头的 CSS 类
【发布时间】：2017-12-30 19:17:11
【问题描述】：

我正在尝试创建一个包含图像的网页。但是，我希望所有图像的大小和格式都相同。我有以下 CSS 类，它适用于 div 并居中和调整图像大小：

.img-container {
    border: thin solid #C4C4C4;
    border-radius: 10px;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
}

但是，我的图片在整个页面中会有不同的尺寸。因此，我想为高度和宽度设置单独的类，如下所示：

.200-200 {
    width: 200px;
    height: 200px;
}

当我将这两个类都应用到 div 时，如下所示：

<div class="img-container 200-200"><img></div>

高度和宽度似乎不适用。我能做些什么来分开这些课程吗？

【问题讨论】：

类不应以数字开头
Is there a workaround to make CSS classes with names that start with numbers valid?的可能重复

标签： html css

【解决方案1】：

对于以数字开头的类，你需要写

.\32 00-200 {
  width: 200px;
  height: 200px;
}

您可能希望避免这样做。

\32 代表数字“2”。它后面的空格是终止转义序列所必需的。

原因是“CSS 标识符”可能不以数字开头。在 CSS 中，选择器中使用的类名被视为“CSS 标识符”。因此，前导数字必须以上面显示的方式进行转义。请注意，从 HTML 角度来看，对类名没有任何限制，除了它们可能不包含空格。所以你可以写<div class="%^*+?&lt;"，只要你愿意弄清楚如何在你的CSS文件中以转义的形式写出来。

请参阅question suggested as a duplicate 了解更多信息。

【讨论】：

做到了。谢谢！

【解决方案2】：

另一个非常有用的符号是：

[class="200"]{
  width: 200px;
  height: 200px;
}

W3C specifications 然而状态：

在 CSS 中，标识符（包括选择器中的元素名称、类和 ID）只能包含字符 [a-zA-Z0-9] 和 ISO 10646 字符 U+00A0 及更高，加上连字符 (-) 和下划线 (_)；它们不能以数字、两个连字符或一个连字符后跟一个数字开头。标识符还可以包含转义字符和任何 ISO 10646 字符作为数字代码（请参阅下一项）。例如，标识符“B&W?”可以写成“B\&W\?”或“B\26 W\3F”。

所以你可能要考虑重新考虑你的类名

【讨论】：

聪明！属性选择器是 said to have worse performance 而不是类选择器，但它可能可以忽略不计，而且 CSS 肯定比使用转义的第一个字符更具可读性。

【解决方案3】：

CSS 类名不应该以数字开头（除非你愿意做@torazaburo's answer 描述的事情）。所以也许改变一下，即类名从“200-200”到“s200-200”。

.200 {
  color: red;
}
.s200 {
  color: red;
}

<div class="200">I'm not red :(</div>
<div class="s200">I am red :)</div>

【讨论】：

【解决方案4】：

你最好不要以数字开头的类名。要修复它，请更改类名。

.img-container {
    border: thin solid #C4C4C4;
    border-radius: 10px;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
}

.c200 {
    width: 200px;
    height: 200px;
}

&lt;div class="img-container c200"&gt;&lt;img&gt;&lt;/div&gt;

【讨论】：