CSS表达式取决于文本

Question

我有一个这样的段落

<p> Lorem ipsum dolor sit amet, /* consectetur adipiscing elit. */ </p>

我希望有一个CSS类，其中/*和*/之间的文字具有不同的字体颜色 谢谢你的帮助！

Answer 1

您无法使用Expressions执行此操作。

CSS / HTML方法，在内部插入一个元素。

您可以这样使用：

<p> Lorem ipsum dolor sit amet, <span class="comment">/* consectetur adipiscing elit. */</span> </p>

CSS：

p span.comment {color: #999;}

演示：http://jsfiddle.net/jNvSw/

或者，如果你想用JavaScript方式（使用jQuery，但它也可以使用纯JavaScript完成）：

​$(document)​.ready(function(){
    $("p").html($("p").html().replace('/*', '<span class="comment">/*'));
    $("p").html($("p").html().replace('*/', '*/</span>'));
});​

演示：http://jsfiddle.net/jNvSw/1/

Answer 2

<p> Lorem ipsum dolor sit amet, <label class="classA"> /* consectetur adipiscing elit. */ </label></p>

<style>
.classA
{
font-size:12px;
font-family:Arial;
color:blue;
}
</style>

Answer 3

如果可能，将标记（/ ** /）替换为<span>标记，然后为其指定具有适当颜色的类。

Answer 4

你可以使用:first-line伪元素破解它，假设有一个换行符：

<p> Lorem ipsum dolor sit amet, /* consectetur adipiscing elit. */ </p>

p { color: grey;
p:first-line { color: black; }

请注意，这个答案不应该被认真对待。