2009-10-08 2 views
8

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

ответ

15

Link посетили Hover Активного

Цитату из CSS specification:

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: ссылки и A: посетили правила, так как в противном случае каскадные правила скроют свойство «color» правила A: hover. Аналогично, поскольку A: активный помещается после A: hover, активный цвет (известь) будет применяться, когда пользователь активирует и навешивает над элементом A.

+0

При посещении он превращает все цвета ссылок в посещенные цвета. Почему это происходит – ArK

+0

Поскольку вы посещали все ссылки раньше? Просто догадаться ... – Joey

+0

нет его происходит недавно загруженной страницы. – ArK

3

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

+0

Cute Мнемонический! +1 –

+1

Попробуйте это, 'LoVe ​​/ HAte', скопированное из Pro CSS Techniques. –

1

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

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> 

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

Смежные вопросы