Question

这可能是一个非常基本的问题，但我不能用标准方法弄清楚。我有一张桌子，我试图为一列做不同的样式。我认为最简单的方法是在此列中使用class =“class”属性，然后在其上应用样式但它不起作用。

这是我的表的例子（它填充了JSON对象但现在不重要）：

<table id="logtable" class="pretty">
        <thead>
            <tr>
                <th>Time</th>
                <th>From</th>
                <th>To</th>
                <th>Payload</th>
            </tr>
        </thead>
        <tbody>
            <c:forEach var="message" items="${messages}">
                <tr>
                    <td><c:out value="${message.timestamp}" /></td>
                    <td><c:out value="${message.sender}" /></td>
                    <td><c:out value="${message.receiver}" /></td>
                    <td class="message"><c:out value="${message.payload}" /></td>
                </tr>
            </c:forEach>
        </tbody>
    </table>

这是我使用的CSS（部分内容）：

table.pretty tbody td {
    text-align: center;
    background: #DEE7EF;
}

这样可行但是当我尝试像这样设置最后一列时，它什么都不做：

table.pretty tbody td .message {
    text-align: left;
}

我做错了什么？感谢您的任何提示！

Answer 1

你只需要：

table.pretty tbody .message {
    text-align: left;
}

（跳过td）。

这是因为.message基本上是指“类message”的任何元素。

另一方面，td .message表示“任何message元素中包含td类的元素。

Answer 2

你和td之间有空格，

<强>替换

table.pretty tbody td .message {

<强>与

table.pretty tbody td.message {

td .message这个css选择器意味着你正在选择.message哪个父级是td。虽然td.message表示td有message类。

Answer 3

您是否尝试过以下操作？

table.pretty tbody td.message {
    text-align: left;
}

我相信td .message正试图通过一类“消息”找到td元素的子元素。

示例：http://jsfiddle.net/Sb2w4/

在元素中使用类 - 样式

3 个答案: