css - 如何替换 CSS 中的特定文本？

Question

我有一张桌子，我想用“X”替换“1”，用“”替换“0”。有可能用 CSS 吗？

<table>
    <tr>
        <td>1</td>
        <td>0</td>
    </tr>
</table>

Answer 1

这听起来像是 jQuery 的工作。

HTML

<table>
    <tr>
        <td>1</td>
        <td>0</td>
    </tr>
</table>

jQuery

$('td').each(function(){
  if ($(this).text() == '1') { $(this).text('X'); }
  if ($(this).text() == '0') { $(this).text(''); }
});

Answer 2

你可以做这样的事情（演示）：

td {
    font-size:0;
}

td:first-child:after {
    content: "X";
    font-size: 14px;
}

但这很难看，我个人更喜欢 javascript 来完成这样的任务。所以不要使用这个解决方案。做这样的事情不是css的任务。

在 jQuery 中，它会像这样简单：

$('td:contains("1")').text('X');
$('td:contains("0")').text('');

并且不要忘记在普通的 javascript 中：

var tds = document.getElementsByTagName('td');

for(var i = 0; tds[i]; i++) {
    if(tds[i].innerHTML == '1') tds[i].innerHTML = 'X';
    if(tds[i].innerHTML == '0') tds[i].innerHTML = '';
}

Answer 3

你可以用一些来做到这一点visibility，after并且content

演示http://jsfiddle.net/kevinPHPkevin/hJyd8/

td:nth-child(1) {
 visibility: hidden;
}
td:nth-child(1):after {
    content:"2";
    visibility:visible;
}
td:nth-child(2) {
 visibility: hidden;
}
td:nth-child(2):after {
    content:"''";
    visibility:visible;
}

Answer 4

如果您确定只使用 CSS 来获得确切的行为，则可以这样做

td:first-child:after
{ 
    content:"X";
}
td:first-child + td:after
{ 
    content:"";
}

但是要使其正常工作，您必须有空列..

<table>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

编辑：为了完成，如果您的 html 与问题中看起来一样简单，我会采用上述方法，但如果您的 html 更具动态性和不可预测性，显然您需要选择 javascript/jQuery 方法。