如何定位以数字开头的 CSS 类名答案

【问题标题】：How to target CSS class names that start with digit如何定位以数字开头的 CSS 类名
【发布时间】：2015-01-16 23:13:42
【问题描述】：

我有一个列表类，我想对其应用上边距 - 但似乎语法对 CSS 无效。我不认为它喜欢 1200mm-x-4700mm 部分。

我无法重命名列表类，因为它是自动生成的。有什么办法可以让我应用 CSS 样式？

<li class="max-panel-size 1200mm-x-4700mm">...</li>

li.max-panel-size.1200mm-x-4700mm {
    margin-top: 20px;
}

【问题讨论】：

标签： css css-selectors

【解决方案1】：

你可以设置一个属性类来解决这个问题：

[class*="1200mm-"] {
    margin-top: 20px;
}

这将为每个包含1200-m的类设置样式

一个例子：http://jsfiddle.net/o9re6vf1/

【讨论】：

Classes shouldn't start with a digit...
@AndréDion 当然，但这是克服此类问题的明智方法。
理智吗？这完全不正确。无论如何，一些浏览器可能会允许这样做，但这仍然是对 CSS 规范的公然违反。
@DarrenBaker 说“无法重命名列表类，因为它是自动生成的。”所以这是解决这个问题的解决方案。我不建议以数字开头的类名，因为它不正确

【解决方案2】：

在 HTML5 中，CSS 类名可以包含（和开头）几乎任何字符。但是，为了在 CSS 文件（或 JavaScript 函数）中定位花哨的 CSS 类名称you need to escape them。

li.max-panel-size.\31 200mm-x-4700mm {
  background: #F00;
}
li.max-panel-size.\31 111mm-x-1111mm {
  background: #0F0;
}
li.max-panel-size.\39 999mm-x-9999mm {
  background: #00F;
}

<ul>
  <li class="max-panel-size 1200mm-x-4700mm">Test 1</li>
  <li class="max-panel-size 1111mm-x-1111mm">Test 2</li>
  <li class="max-panel-size 9999mm-x-9999mm">Test 3</li>
</ul>

您也可以使用CSS2 [att~=val] selector。

【讨论】：

顺便说一句：HTML5 允许数字 id 和以数字开头的 id。但是，CSS3 规范仍然没有这样说，并遵循 CSS2.1 不允许数字前缀名称/id 的约定。

【解决方案3】：

以数字开头的 CSS 类选择器和 ID 选择器无效。

Characters and case

但您仍然可以解决此问题。有两种方法可以实现这一点

首先是attribute 选择器：

/* attribute selector */
[class="12px"] {
    font-size: 12px;
}

其他是unicode选择器：

/* or unicode selector */
.\31 00px {
  font-size: 100px;
}

/* attribute selector */
[class="12px"] {
  font-size: 12px;
}

/* or unicode selector */
.\31 00px {
  font-size: 100px;
}

<p class="12px"> Hello, world. </p>
<p class="100px"> Hello, world. </p>

注意：如果您要使用属性选择器路由，请注意它仅适用于 IE7。如果您需要支持旧版浏览器，我对此表示同情（您仍然可以使用 unicode 选择器）。

【讨论】：

【解决方案4】：

您可以自定义 HTML5 数据属性

<li class="max-panel-size" data-margin="1200mm-x-4700mm">

li[data-margin="1200mm-x-4700mm"]{
  margin-top: 20px;
}

【讨论】：