html - 数字大于的 CSS 规则

Question

<table>
<tbody>
<tr class="positive">
<td class="happy">12</td>
<td class="happy">7</td>
<td class="happy">69</td>
</tr>
</tbody>
</table>

▲ 这是原始html代码。

td.happy(@>10) {color:red;}
td.happy(@>50) {color:blue;}

▲ 这就是我想要的CSS代码。 (想象)

我想在数字大于特定数字(10, 50)时应用CSS样式

我已经尝试过 Java 脚本，它确实有效，但我想尽可能只使用 html 和 CSS 制作网站。

有什么方法可以选择标签中的文本编号吗？

Answer 1

你不能用纯css，你必须jquery的帮助:

$(document).ready(function(){
  $('tr.positive td.happy').each(function(){
    number = parseFloat($(this).text());
    if(number > 10)
      $(this).addClass('greater10');
    if(number > 50)
      $(this).addClass('greater50');
  })
})

td {
  border: 1px solid #000;
}

.greater10 {
  color: red;
}

.greater50 {
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr class="positive">
      <td class="happy">12</td>
      <td class="happy">7</td>
      <td class="happy">69</td>
    </tr>
  </tbody>
</table>