CSS! Нужно ли повторять одни и те же свойства для каждого состояния ссылки? (ссылка, посещение, наведение & # 8230; и т. д.)?

StackOverflow https://stackoverflow.com/questions/1616034

  •  06-07-2019
  •  | 
  •  

Вопрос

Нужно или не рекомендуется повторять свойства, которые не меняются в каждом типе ссылки? Вот так:

a:link {display: block; width: 50px;}
a:visited {display: block; width: 50px; color: #000;}
a:hover {display: block; width: 50px; color: #FFF}
a:active {display: block; width: 50px; color: #FFF}

Должен ли блок дисплея быть в каждом? Или это плохая практика? Кроме того, вы можете связать состояния связей? Вот так:

a:hover, a:active {display: block; width: 50px; color: #FFF}

Кроме того, если у вас есть добавленный идентификатор / класс в ссылках, должны ли они сначала наследовать стили по умолчанию, а затем изменяться для конкретного идентификатора / класса? Вот так:

a:link {display: block; width: 50px; color: #000;}
....(etc)
a.menu:link {color: #FFF;}
....(etc)

Ссылка .menu получит отображение и ширину из ссылки:: а затем просто изменит цвет?

СПАСИБО ОГРОМНОЕ за любую помощь в прояснении всего этого!

Это было полезно?

Решение

Вы можете связать состояния ссылок.

: ссылка и: посещенные являются наиболее основными определениями для ссылок. Заявления, сделанные на них, будут на каждой ссылке на странице, даже если ссылка имеет классы или идентификатор.

Сказал, что: hover и: active не нужно отображать: block, если вы объявили об этом в: link и: посещения.

Другие советы

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

Вы можете установить {display: block; width: 50px}, и это будет охватывать все состояния (если не указано иное в другом месте. И да, вы также должны иметь возможность связывать состояния.

И вы совершенно правы: они наследуют стиль, назначенный типу элемента, но переменные id / class name будут иметь приоритет, если они установлены.

После ответа Бена:

a{ display:block; width: 50px }
a:hover, a:active{ color: #fff; }
a:visited{color: #000}
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top