javascript - CSS 通配符选择

Question

我在css中使用这个通配符来选择包含“,”逗号的数据。

td[data-content*=","]{
  background-color: yellow;
}

有没有办法区分数据中","的个数。我可以用黄色突出显示包含一个逗号的数据。我想突出显示包含两个绿色逗号的数据。有没有办法用 CSS 做到这一点？谢谢。

我想根据逗号数据包含的个数同时使用不同的颜色。所以像 (1,2) 这样的数据会是黄色的。并且像 (1,2,3) 这样的数据将是绿色的。

Answer 1

这是一个 jQuery 解决方案:

$('td').each(function() {
  var c = $(this).text();
  if (!c) return;
  var commas = c.split(",").length - 1;
  if (commas === 1) $(this).css("background-color", "yellow");
  if (commas === 2) $(this).css("background-color", "green");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>a</td>
      <td>a,b</td>
      <td>a,b,c</td>
    </tr>
  </tbody>
</table>

应该是不言自明的:

1. 捕获td
2. 读取data-content属性并计算逗号
3. 设置样式