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

问题描述 投票:0回答:6

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

为什么你不能在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,这意味着容器的宽度为400pxbackground-color用于检查是否属实。

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

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

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

html css css-selectors
6个回答
5
投票

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

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


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

3
投票

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


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

3
投票

这可以帮助你理解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>

0
投票

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

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

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

© www.soinside.com 2019 - 2024. All rights reserved.