html - 在 元素中使用类 - 样式

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 表示“在任何 td 元素中具有类 message 的任何元素。