如何替换 CSS 中的特定文本？ [复制]答案

【问题标题】：How to replace a specific text in CSS? [duplicate]如何替换 CSS 中的特定文本？ [复制]
【发布时间】：2013-08-06 15:24:46
【问题描述】：

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

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

【问题讨论】：

如果您的 td 有特定的类或 ID，那么可以。不仅仅基于内容。
Possible duplicate。 Related question.
这不是 CSS 的责任 - CSS 是为现有内容设置样式，而不是直接创建或操作它。
@Dai 虽然您在概念上是对的，但 CSS 确实具有使内容不可见并引入其他文本来替换它的工具。如果 OP 要求替换 1 和 0 的 image 会不会对你有用？或者，1s 和 0s 的不同字体？

标签： css

【解决方案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(''); }
});

【讨论】：

OP 询问“CSS 是否可行”。由于替换东西并不是 CSS 真正的工作，而且不改变 HTML 是不可能的，所以我发布了一个更合适的解决方案。
不需要 jQuery。只需使用普通的 javascript。
@Rob 在我的答案中添加了非 jquery 解决方案，以防万一没有人需要它:)

【解决方案2】：

如果您确定只使用 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接近。

【讨论】：

【解决方案3】：

你可以这样做 (DEMO)：

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 = '';
}

【讨论】：

【解决方案4】：

你可以用一些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;
}

【讨论】：

visibility的问题是会在td中保留0和1的空间。