Измените все состояния ссылок на один цвет css

У меня есть натянутый класс под названием "помидор".

Мой css:

.tomato a:link {color:#FF0000;}      /* unvisited link */
.tomato a:visited {color:#FF0000;}  /* visited link */
.tomato a:hover {color:#FF0000;}  /* mouse over link */
.tomato a:active {color:#FF0000;}  /* selected link */

Есть ли способ объединить все это в меньшую часть кода? (Я хочу, чтобы ссылка была красной во всех состояниях)

Ответы

Ответ 1

Это shortest, я не думаю, что вы можете сделать это короче, чем:

.tomato a:link, .tomato a:visited, .tomato a:hover, .tomato a:active { color:#FF0000; }

ИЛИ

.tomato { a:link, a:visited, a:hover, a:active { color:#FF00000; } }

Надеюсь, что это поможет.

Ответ 2

.tomato a:link,
.tomato a:visited,
.tomato a:hover,
.tomato a:active {
    color:#F00;
}

Обратите внимание, что цветной HEX также может быть сокращен.:)

Если вы решили использовать CSS-структуру для организации своего CSS, например LESS, это может быть намного проще, чем указано выше:

.tomato {
   a:link,
   a:visited,
   a:hover,
   a:active {
       color:#F00;
   }
}

Ответ 3

Лучше всего использовать селектор атрибутов. В этом случае это будет:

.tomato a[href]{color:#F00;}

или если вы должны:

.tomato [href]{color:#F00;}