Question

我希望样式跨度值，我希望文本“黄色”设置为黄色;和“红色”为红色;这是示例代码：

<ul class="color">
    <li class="all-color"> <span data-vc-grid-filter-value=".vc_grid-term-1">yellow</span>

    </li>
    <li class="all-color"> <span data-vc-grid-filter-value=".vc_grid-term-2">red</span>

    </li>
</ul>

Answer 1

我知道jQuery在这个问题中没有提及，但这是你在使用它时可以做的事情：

$(".all-color").each(function () {
    $(this).css("color", $(this).text());
});

Here is the JSFiddle demo

代码会根据您放置的颜色名称更改文本颜色：）

Answer 2

要实现这一目标，您必须制作两个班级red＆amp; yellow然后在span字段上分配这些类。在CSS中，您必须为字段设置color属性。

检查代码：

.red{
 color:red 
  }

.yellow{
 color:yellow 
  }

<ul class="color">
    <li class="all-color"> <span data-vc-grid-filter-value=".vc_grid-term-1" class="yellow">yellow</span>

    </li>
    <li class="all-color"> <span data-vc-grid-filter-value=".vc_grid-term-2" class="red">red</span>

    </li>
</ul>

<!-- begin snippet: js hide: false -->

Answer 3

span[data-vc-grid-filter-value=".vc_grid-term-1"] {
    display: block;
    color: red;
}

同样，您可以选择另一个范围。根据问题，您希望按值选择范围。

如何设计风格跨越价值

3 个答案: