TL;DR:这是可能的。寻找我的答案中的最后一个解决方案,或查看此博客:
使用纯 css 进行条件格式设置 http://rpbouman.blogspot.nl/2015/04/using-css-attr-syntax-for-conditional.html
我假设您不想隐藏单元格,而只想隐藏它的值。隐藏单元格在表格中没有意义,因为它可能会改变布局,而且任何单元格边框等也会被隐藏 - 可能不是您想要的。
现在 CSS 没有任何基于元素文本内容的选择器。但它确实支持属性值选择器。因此,您可以将代码更改为:
<table>
<caption>Test</caption>
<tr>
<th>Values</th>
<td><input value="$100"/></td>
</tr>
<tr>
<th>Initial value</th>
<td><input value="$0"/></td>
</tr>
</table>
并使用类似的规则
input[value="$0"] {
display: none;
}
您甚至可以通过添加禁用属性来使输入的行为与输入不同,这样它们就不可编辑。
如果您不想使用输入元素,您可以考虑使用 span 并使用“data-value”属性,并尝试浏览器是否尊重这一点:
<table>
<caption>Test</caption>
<tr>
<th>Values</th>
<td><span data-value="$100">$100</span></td>
</tr>
<tr>
<th>Initial value</th>
<td ><span data-value="$0">$0</span></td>
</tr>
</table>
情况是:
td > span[data-value="$0"] {
display: none;
}
当然这样做的缺点是你必须添加两次值(一次作为文本内容,一次作为属性),并且你需要生成一个内部的 span 元素,感觉有点难看。
或者,您可以尝试添加包含该值的类属性并创建一个类选择器:
<table>
<caption>Test</caption>
<tr>
<th>Values</th>
<td ><span class="value100">$100</span></td>
</tr>
<tr>
<th>Initial value</th>
<td ><span class="value0">$0</span></td>
</tr>
</table>
并且CSS将是:
td span.value0 {
display: none;
}
当然,缺点与之前的方法相同 - 您必须生成两次值,一次作为文本内容,一次作为类名,并且需要添加内部跨度。
编辑:美元字符在CSS类名中无效,所以我删除了它。
EDIT2:事实证明有一种方法可以做到这一点,而无需将值复制为文本和属性。作为奖励,事实证明,如果我们依赖于 :after 伪类,您也不需要内部跨度(因为隐藏的是该类,而不是单元格本身):
<table border="1">
<caption>Test</caption>
<tr>
<th>Values</th>
<td data-value="$100"></td>
</tr>
<tr>
<th>Initial value</th>
<td data-value="$0"></td>
</tr>
</table>
使用这个CSS:
td:after {
content: attr(data-value);
}
td[data-value="$0"]:after {
content: "";
}