Question

我想根据span标签内的内容更改span颜色，例如红色，绿色，蓝色，黄色，我不能使用nth-child或inline类。由于cms的限制。我希望只有css是可能的，如果不可能，那么适当的方法是什么？

提前致谢

.selected-color span.value{
    color:grey;
}

＆＃13;

.selected-color .value{
      color:grey; /*default color*/
}

＆＃13;

<div class="selected-color">
    <div class="value">red</div>
    <div class="value">green</div>
    <div class="value">blue</div>
    <div class="value">yellow</div>
</div>

＆＃13;

Answer 1

在jquery中使用.each()迭代元素并获取当前对象$(this)并通过jquery为所有元素应用css颜色

$(".selected-color .value ").each(function() {

      var value=  $(this).text();
      $(this).css("color", value);
});

Fiddle

Answer 2

您可以使用jQuery实现此目的。迭代.value元素，获取每个文本值并分配ass css属性color

$('.value').each(function () {
  var val = $(this).text();
  $(this).css({'color':val});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="selected-color">
        <div class="value">red</div>
        <div class="value">green</div>
        <div class="value">blue</div>
        <div class="value">yellow</div>
    </div>

Answer 3

$(".selected-color .value ").each(function() {
     //If any leading or trailing space then remove it
      var value=  $(this).text().trim();
      $(this).css("color", value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="selected-color">
    <div class="value">red</div>
    <div class="value">green</div>
    <div class="value">blue</div>
    <div class="value">yellow</div>
</div>

Answer 4

你需要使用jQuery，因为纯CSS不知道div的内容。

jQuery代码：

<script type="text/javascript">
    $(".value").each(function( index ) {
        $(this).css("color", $(this).text());
    });
</script>

（不要忘记将jQuery库加载到您的网站，如果您还没有）。

正在工作jsfiddle。

Answer 5

无法通过CSS直接引用内容。您只能指向标签。如果你有一个标签，你可以设置一个类或引用一个属性或类似但永远不会指向内容（至少，据我所知）。

所以，你必须重复＆＃34;在你的情况下，内容作为类中的值，如下所示。

＆＃13;

.selected-color > .value.red { color: red; }
.selected-color > .value.green { color: green; }
.selected-color > .value.blue { color: blue; }
.selected-color > .value.yellow { color: yellow; }

＆＃13;

<div class="selected-color">
    <div class="value red">red</div>
    <div class="value green">green</div>
    <div class="value blue">blue</div>
    <div class="value yellow">yellow</div>
</div>

＆＃13;

我需要根据文字改变Div Eliment的颜色

5 个答案: