html - 我可以使用 CSS 更改 block 中特定单词的样式吗？

Question

例如，我想在代码中突出显示关键字“add”、“mov”等:

<code>
add 1, 2<br/>
mov 3, 4<br/>
</code>

那么我可以只使用 CSS 而不是编辑 HTML 来更改 block 中特定关键字的样式吗？

更新。 好的，为了解决方法，我附加到页面脚本，如:

window.onload = function()
{
    var list = document.getElementsByTagName("code");

    for (var i = 0; i < list.length; i++)
    {
        list[i].innerHTML = list[i].innerHTML
            .replace(/mov/g, '<span id="keyword">mov</span>')
            .replace(/set/g, '<span id="keyword">set</span>');
    }
}

但是，我仍然很乐意在 CSS 中找到解决方案。

Answer 1

我认为您必须将单词包装在要设置样式的标签中，例如

<code>
  <span class="func">add</span> 1, 2<br/>
  <span class="func">mov</span> 3, 4<br/>
</code>

然后使用添加到您的 CSS 文件中的类来设置单词的样式

.func
{
  color: blue;
}

例子可以在这里看到http://jsfiddle.net/6NAG3/

编辑:要查看漂亮的代码在引擎盖下是什么样子，请在开发工具中检查上面的代码，您可以看到它们如何包装元素