css - 在 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 选择包含 span.n 的 td？我想右对齐

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 作为内联元素对齐，但会使其全宽且文本右对齐。