Question

我的php页面将生成一个动态的HTML。

以下是输出;

<label class="required">suject *</label>

不幸的是我无法编辑html

现在我需要用红色显示'*'。

我怎么能为此写css？

Answer 1

有几种方法可以做到这一点：

如果您有权访问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代码），但使用伪类将其添加回标签元素：< / p>

label.required:after {
    content: '*';
    color: red;
}

Answer 2

CSS允许您选择元素（以及有限数量的伪元素，如:first-line）。

无法选择“最后一个字符”，“匹配*的字符”或其他任何可以实现您想要的内容的内容。

您必须修改DOM。最简单的方法是修改生成的HTML。 hacky方法是在加载后用JavaScript修改它。

Answer 3

这是基于Terry的答案：您只需使用:after来模拟效果，并将该内容放在生成的HTML上。

label.required:after {
    content: '*';
    color: red;
    background:white;
    position: relative;
    left: -8px;
}

http://jsfiddle.net/x2KN7/

Answer 4

它不可能通过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&nbsp;<span style='color:red'>*</span>";
    }
  }  
}
</script>

尝试以上操作，希望它能解决您的问题。我使用过简单的javascript，但是如果你知道一个javascript库（YUI，dojo，jquery），那么你可以用1或2行来完成。

如何设置PHP创建的动态html的样式

4 个答案: