порядок ссылок в css - PullRequest
Новая
       16

порядок ссылок в css

8 голосов
/ 08 октября 2009

Каков правильный порядок оформления элемента <a> (ссылка, посещение, наведение, активный). Все сбивают с толку, предоставляя различные комбинации, такие как LVHA, LAHV. Кто-нибудь может указать правильный порядок?

Ответы [ 3 ]

15 голосов
/ 08 октября 2009

Ссылка на посещение при наведении курсора

Цитировать из спецификации CSS : 

a:link    { color: red }    /* unvisited links */
a:visited { color: blue }   /* visited links   */
a:hover   { color: yellow } /* user hovers     */
a:active  { color: lime }   /* active links    */

Обратите внимание, что указатель A: должен находиться после правил A: link и A: посещения, поскольку в противном случае каскадные правила будут скрывать свойство 'color' правила A: hover. Точно так же, поскольку A: active помещается после A: hover, активный цвет (лайм) будет применяться, когда пользователь одновременно активирует и наводит курсор на элемент A.

3 голосов
/ 03 марта 2010

Вы могли бы также предпочесть заказ VLHA, который не имеет значения. Однако в спецификации CSS указан порядок LVHA, и, на самом деле, его легко запомнить: i LoVeHA!

1 голос
/ 16 марта 2014

Вот лучший порядок, особенно для псевдо-классов. A L V VH H A (я произношу это Al'va ha ') 

a              { color: white; text-decoration: none; }                 /* bookmark */
a:link         { color: red; }                                          /* regular link */
a:visited      { color: green; text-decoration: strikethrough; }        /* visited link */
a:visited:hover { color: blue; text-decoration: underline overline; }    /* visted hover link */
a:hover        { color: yellow; text-decoration: underline overline; }  /* hover link */
a:active       { color: orange; text-decoration: underline overline; }  /* active link */

При этом сохраняются оба посещенных состояния и оба состояния при наведении, а также соблюдение указанного порядка. Это также позволяет стилизовать закладки, такие как 

<a name="bookmark_name">Bookmark Text</a>

, на которую вы можете нацелиться 

<a href="bookmark_name">Link Text</a>

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

...