我的php页面会生成一个动态的html。
以下是输出；
<label class="required">suject *</label>
很遗憾，我无法编辑 html
现在我需要用红色显示“*”。
我如何为此编写 css？
【问题讨论】：
* 显示为红色。 stackoverflow.com/questions/7165094/…
text-replace cssportal.com/css-properties/text-replace.htm 和 content css-tricks.com/css-content 做点什么，但我不知道这两个区域在不同浏览器中的支持有多好。
有几种方法可以做到这一点：
如果您可以访问 PHP 源代码，那么您可以相应地修改输出，也许用 <span> 标记包装 * 并设置相应的样式。
或者，你可以使用 JS 来做同样的事情：
$(document).ready(function() {
// Loop through all labels with required class
$('label.required').each(function() {
$(this).html($(this).html().replace(/\*/g, '<span class="asterisk">*</span>'));
});
});
在你的 CSS 中，你可以用任何你想要的方式来设置它：
.required .asterisk {
color: red;
}
在这里查看小提琴 - http://jsfiddle.net/teddyrised/JTesR/
更好：使用 CSS
这是为了尽可能在语义上正确而编写的 - 您可以使用 JS 删除 * 字符（或更改 PHP 代码），但使用伪类将其添加回标签元素：
label.required:after {
content: '*';
color: red;
}
【讨论】：
CSS 允许您选择元素（以及有限数量的伪元素，例如 :first-line）。
没有办法选择“最后一个字符”、“匹配* 的字符”或任何其他可以实现您想要的东西。
您必须修改 DOM。最简单的方法是修改生成它的 HTML。 hacky 方法是在加载后使用 JavaScript 对其进行修改。
【讨论】：
这是基于 Terry 的回答：您可以简单地使用 :after 来模拟效果，并将该内容放在生成的 HTML 上。
label.required:after {
content: '*';
color: red;
background:white;
position: relative;
left: -8px;
}
【讨论】：
:nth-child() 或其他任何东西来仅定位一个标签。
.required 元素周围的包装器具有相对包装器。但是我认为，如果仅针对 OP 声明的确切情况，您现在所拥有的就足够了。
通过 CSS 是不可能的，但你可以用 javascript 做一些事情。如果此内容是在页面加载时生成的，那么您可以挂钩页面加载事件，获取对此元素的引用并进行更改。
<script type='text/javascript'>
document.onload = function (e) {
var col = document.getElementsByClassName("required");
for (var i=0;i<col.length;i++) {
if (col[i].innerHTML == "subject *") {
col[i].innerHTML = "subject <span style='color:red'>*</span>";
}
}
}
</script>
试试上面的方法，希望能解决你的问题。我使用过简单的 javascript，但如果您知道 javascript 库（YUI、dojo、jquery），那么您可以在 1 或 2 行中完成此操作。
【讨论】：