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

如果你看了specification，没有。

您可以匹配元素，元素中属性的名称以及元素中命名属性的值。您可以执行的唯一控件是标记是empty。

Answer 2

不是来自css，如果你想避免一个全新的js页面，那么可以考虑在你的HTML中嵌入j。

Answer 3

你不能用纯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>

数量大于的CSS规则

3 个答案: