CSS无法选择带有数字的类/ id？ [重复]

Question

这个问题在这里已有答案：

• Which characters are valid in CSS class names/selectors? 8个答案

为什么你不能在CSS中使用数字，还有另一种方法可以完成这项工作吗？我有以下代码：

<div class="center 400-width" id="position">
    <div class="" id="header">
        Header
    </div>
    <div class="" id="content">
        Content
    </div>
    <div class="" id="footer">
        Footer
    </div>
</div>

CSS选择类400-width，这意味着容器的宽度为400px。 background-color用于检查是否属实。

.400-width{
    width:400px;
    background-color:blue;
    color:white;
}

它现在不会发生，因为你可以看到here

我用400-替换four解决了这个问题。所以它变成了fourwidth。

Answer 1

我遇到了同样的问题....实际上它不是问题..

而不是'.400-width'使用'.width-400'

Answer 2

.width-400{
    width:400px;
    background-color:blue;
    color:white;
}

Answer 3

CSS类名不能以数字开头，它们必须以字母开头;在做网格系统等之前，这让我感到困惑。你可能会使用width-400或简洁w400。

Answer 4

._400-width{
    width:400px;
    background-color:blue;
    color:white;
}

Answer 5

这可以帮助你理解CSS的语义

css semantic

Bad Semantics

<div class="article">
  <div class="article_title">Smurf Movie Kinda Sucks</div>
  <div class="the_content">Not surprisingly, this weeks release of
     <div class="darkbold">The Smurfs</div> kinda sucks.</div>
</div>

Good Semantics

<article>
  <h1>Smurf Movie Kinda Sucks</h1>
  <p>Not surprisingly, this weeks release of
     <b>The Smurfs</b> kinda sucks.</p>
</article>

Answer 6

根据W3C spec CSS标识符不能以数字开头，但如果您想保留400-width，您可以使用一个小技巧并用n替换前导数字\3n

.\34 00-width{
  width:400px;
  background-color:blue;
  color:white;
}

在这里你有它工作in your jsfiddle，加上几个other samples，和相关的SO comment