css - 如何选择包含具有特定文本的列的行？

Question

想象下表:

<table>
  <tr>
    <td>Valor 1</td>
  </tr>
  <tr>
    <td>Valor 2</td>
  </tr>
  <tr>
    <td>Valor 3</td>
  </tr>
</table>

我已经使用 CSS 选择器以这种方式进行了尝试。

tr td [innerHTML="Valor 1"]{
  background: red;
}

我想为包含“Valor 1”列的行着色。我做错了什么？

Answer 1

您可以为此使用 :nth-child(1) 属性或 javascript。但是如果你只想使用 css-way，你应该添加 td 数据属性，然后你可以使用这样的东西:td[data-attr="Valor 1"] { ... }这是我的 css 解决方案示例 https://jsfiddle.net/L1gsq73t/