Question

我有一张桌子，我希望将“1”替换为“X”，将“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

你可以这样做（DEMO）：

td {
    font-size:0;
}

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

但那很难看，我个人更喜欢使用javascript来完成这项任务。所以不要使用这个解决方案。做cs的任务不是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

如果你确定只想使用CSS

确定你想要的确切行为，那么你可以这样做

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

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

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

编辑：为了完成，如果你的html就像在问题中看起来一样简单，我会采用上面的方法但是如果你的html更有活力＆amp;不可预测，显然你需要选择javascript / jQuery方法。

Answer 4

您可以对某些visibility，after和content

执行此操作

DEMO 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;
}

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

4 个答案: