Question

我有一张桌子。我只想让第一列左对齐，其他列对齐。我使用以下样式：

<style>
    table{ width:100%;}
    .1col{ text-align:left;}
    .othercols{width:100px;}
    table>tbody>tr>td, table>tbody>tr>th { text-align:center;} 
</style>

然后我有我的桌子：

<table>
    <tr>
        <th class="1col">Category</th>
        <th class="othercols">Some text</th>
        <th class="othercols">Some text</th>
        <th class="othercols">Some text</th>
    </tr>
    <tr >
        <td class="1col">Some text</td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

结果是我的1col类被忽略了。有什么想法吗？

Answer 1

CSS Class不能以整数开头，因此请尝试使用col1。

工作示例：http://jsfiddle.net/9X7kz/8/

如果你有兴趣，这是完整的语法：

http://www.w3.org/TR/CSS21/grammar.html#scanner

这是具体的规则规范：

http://www.w3.org/TR/CSS21/syndata.html#characters

在CSS中，标识符（包括元素名称，类和ID）选择器）只能包含字符[a-zA-Z0-9]和ISO 10646 字符U + 00A0和更高，加上连字符（ - ）和下划线（_）; 他们不能以数字，两个连字符或后面的连字符开头数字。标识符还可以包含转义字符和任何字符 ISO 10646字符作为数字代码（参见下一项）。例如，标识符“B＆amp; W？”可以写成“B \＆amp; W \？”或“B \ 26 W \ 3F”。

Answer 2

CSS中任何降序选择器（即从父项中选择的任何内容，如table>tbody>tr>th）都比不降序的选择器更具体（如任何花园种类div或{{1} }）。

一般来说，你应该避免这种程度的特异性，因为它会引起很多问题（很像你现在经历的问题）。

“直接子选择器”只选择直接后代，所以在这里它并没有真正帮到你，看到.class只能 从th下降，而tbody只能来自th。

您应该为表提供一个类，并下载与该元素相关的所有样式或该类中的子元素。

此外，在CSS中，样式表中更深层次的样式会覆盖上面的样式，这也取决于其他一些加权因子（链接在下面的steveax评论中）。

你需要进一步放下tr声明才能获得优先权......而且，根据SiGanteng的回答......不要用数字启动类名。

.1col

Answer 3

将1col更改为acol。 Here 是一个有效的现场演示。这是你想要的吗？

Answer 4

工作代码：

<style>
    table{ width:100%;}
    .col1{ text-align:left;}
    .othercols{width:100px;}
    table>tbody>tr>td, table>tbody>tr>th { text-align:center;} 
</style>

<table>
<tr>
    <th class="col1">Category</th>
    <th class="othercols">Some text</th>
    <th class="othercols">Some text</th>
    <th class="othercols">Some text</th>
</tr>
<tr >
    <td class="col1">Some text</td>
    <td></td>
    <td></td>
    <td></td>
</tr>

为什么css类被覆盖？

4 个答案: