td 中的 CSS 填充文本不起作用

Question

我有这个简单的 HTML:

<table class="code_editor">
    <tr><td>RUN</td></tr>
    <tr><td>#include &#60;stdio.h&#62;</td></tr>
    <tr><td>int main(){</td></tr>
    <tr><td class="1indent">char answer[256];</td></tr>
    <tr><td class="1indent">printf("%s","Hello World!\n");</td></tr>
    <tr><td class="1indent">printf("%s","You can read this:");</td></tr>
    <tr><td class="1indent">if( scanf("%s", &answer) == 1 )</td></tr>
    <tr><td class="2indent">goto About_Me;</td></tr>
    <tr><td class="1indent">return 0;</td></tr>
    <tr><td>}</td></tr>
</table>

还有这个简单的 CSS:

.1indent{
    padding-left: 10px;
}
.2indent{
    padding-left: 20px;
}

但是，为什么我的填充没有影响我的 <td> ？这是我的 Fiddle 这里一定有一个愚蠢的错误..

Answer 1

在 CSS2 类中，标识符不能以数字 [0..9] 开头 unless you escape them例如.\1indent

所以你可以使用属性选择器来代替

[class="1indent"] {
    padding-left: 10px;
}
[class="2indent"]  {
    padding-left: 20px;
}

http://jsfiddle.net/cnoLrs1h/

---

或者您可以将标识值作为后缀放置

.indent1 {
    padding-left: 10px;
}
.indent2 {
    padding-left: 20px;
}

http://jsfiddle.net/s7exbr0r/