Question

我正在尝试用自定义CSS创建一个表，我不知道我做错了什么。之前已完成此操作，但由于某种原因我无法获得令人难以置信的CSS显示...只显示一个没有样式的空白表。

CSS：

table.300yardsTable{background:#EEE;color:#333;font-size:14px;text-align:center;}
table.300yardsTableHeader tr{background:#CCC;font-weight:bold;}
table.300yardsRow tr{background:#EEE;color:#333;}
table.300yardsRow:hover tr{background:#242424;color:#CCC;}

表：

<table width="600" border="1" align="center" cellpadding="2" cellspacing="2" class="300yardsTable">
<tr class="300yardsTableHeader">
    <td width="25%">LOFT</td>
    <td width="25%">HAND</td>
    <td width="25%">LIE</td>
    <td width="25%">VOLUME</td>
</tr>
<tr class="300yardsRow">
    <td>8*-12*</td>
    <td>RH/LH</td>
    <td>61*</td>
    <td>460cc</td>
</tr>
</table>

Answer 1

你的css是错误的，类不在桌子上。

tr.yardsTableHeader tr{background:#CCC;font-weight:bold;}
tr.yardsRow {background:#EEE;color:#333;}
tr.yardsRow:hover{background:#242424;color:#CCC;}

从类名

中删除＃

Answer 2

您无法使用数字启动css类名。所以300yearsTableHeader是一个无效的名称

The spec gives more on this.

Answer 3

我相信你不能使用数字来启动CSS属性。尝试使用.yardsTable代替.300yardsTable。

Answer 4

您不能使用class启动integer名称。 Check out the fiddle here

Answer 5

.300yardsTable {background:#EEE;color:#333;font-size:14px;text-align:center;}

    .300yardsTable .300yardsTableHeader {background:#CCC;font-weight:bold;}

    .300yardsTable .300yardsRow {background:#EEE;color:#333;}
         .300yardsTable .300yardsRow:hover {background:#242424;color:#CCC;}

Css选择器名称不能以数字开头。

Answer 6

正如其他人所说，你不能用＃来启动类名。此外，需要删除'table'前缀或使用tr.classname更改tr上的那些

给表CSS类

6 个答案: