选择包含CSS中的A span的TD

Question

如果我已生成HTML：

<td><span class='n'>123<span class='thousand'>124</span>124</span></td>
<td>not a number</td>

来自Vue.js模板：

<td>{{ num | integer }}</td>
<td>{{ str }}</td>

如何使用CSS选择包含td的{​​{1}}？我想将它与正确对齐

Answer 1

您正在寻找尚未在CSS中实现的父选择器（等待CSSv4）。

您可以使用js / jQuery选择父级：

$('span.n').closest('td').addClass('text-align-left')

如果您的文字包含在span中，并且只是必须在td中对齐的文字，那么您可以使用此类css：

td span.n {
    display: block;
    text-align: right;
}

它会将span对齐移除为内联元素，但会使文本全宽，右对齐。

Answer 2

您可以使用以下其中一行轻松完成此操作：

td .n{float:right;}
td span.n{float:right;}
td > .n{float:right;}
td > span.n{float:right;}