как стиль span со значением

Question

Я хочу стиль span со значением, я хочу, чтобы текст «желтый» установлен в цвет как желтый; и «красный» цвет как красный; Вот пример кода:

<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

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

Аналогично вы можете выбрать другой срок. В соответствии с вопросом вы хотите выбрать диапазон по значениям.

Answer 2

Для достижения этой цели вы должны сделать два класса, как red & 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

Я знаю, что JQuery имеет не было упомянуто в этом вопросе, но это то, что вы могли бы сделать в случае, если используется его:

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

Here is the JSFiddle demo

Код изменяет цвет текста на основе имени цвета вы положили там :)