Как использовать значения атрибута в CSS - PullRequest
Новая
       4

Как использовать значения атрибута в CSS

0 голосов
/ 20 марта 2020

Смотрите там: 

a[target="_blank"]{
        color: red;
    }
<a target="_blank">Im Red</a>
<br>
<a>Im Normal</a>

Правильно, но можно ли получить ЗНАЧЕНИЕ АТРИБУТА ?

Как это: 

*[colorAttrib]{
        color:/* value of colorAttrib */;
    }
<p colorAttrib="red">I Want To Be Red</p>
<p colorAttrib="blue">I Want To Be Blue</p>

Что абзац FIRST равен RED , а абзац SECOND равен СИНИЙ .

1 Ответ

1 голос
/ 20 марта 2020

Я бы рекомендовал использовать атрибуты данных для этой конкретной задачи. W3 Schools имеет отличный обзор того, что они есть, как они работают и какую поддержку они оказывают.

Атрибут data-* дает нам возможность вставлять пользовательские атрибуты данных на всех HTML элементах. 

*[data-color='red'] { color: red; }
*[data-color='blue'] { color: blue; }
<p data-color="red">I am red.</p>
<p data-color="blue">I am blue.</p>

Что касается вашего комментария:

Но как насчет того, когда у меня есть 1000 значений?!

Ваш предел - это действительно ваше воображение. Например, я расширю это: 

*[data-color='red'] { color: red; }
*[data-color='blue'] { color: blue; }
*[data-color='green'] { color: green; }
*[data-color='normal'] { color: black; }
*[data-color='gradient'] {
  background: #1CB5E0;
	background: -webkit-linear-gradient(to bottom, #000046, #1CB5E0);
	background: linear-gradient(to bottom, #0000aa, #1CB5E0);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}
*[data-color='poly'] { color: #f95; }
*[data-color='asq93'] { color: #a5c; }
<p data-color="red">I am red.</p>
<p data-color="blue">I am blue.</p>
<p data-color="green">I am green.</p>
<p data-color="normal">I am normal.</p>
<p data-color="gradient">I am gradient.</p>
<p data-color="poly">I am poly.</p>
<p data-color="asq93">I am asq93.</p>
...