5

这可能是一个非常基本的问题，但我无法用标准方法弄清楚。我有一张表，我试图在其中为一列做不同的样式。我认为最简单的方法是在此列中使用 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;
}

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

4

3 回答 3

7

您只需：

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

（跳过td）。

这是因为.message基本上意味着“具有类的任何元素message”。

另一方面，td .message表示“message在任何元素中具有类的任何td元素。

于 2013-10-08T11:54:10.927 回答
3

您在 td 和消息之间有空间，

代替

table.pretty tbody td .message {

和

table.pretty tbody td.message {

td .message这个 css 选择器意味着您正在选择 .message 哪个父级是 td。whiletd.message表示td上课message。

于 2013-10-08T11:54:48.650 回答
0

您是否尝试过以下操作？

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

我相信 td .message 正试图为 td 元素找到一个具有“消息”类的子元素。

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

于 2013-10-08T11:59:59.073 回答