Простой вопрос по псевдо-классам

sashakiselev · July 20, 2010

Удивило странное повидение "правильных" браузеров.

Имея вот такие пожелания, записанные в CSS файле

a:link {color: blue;}

a:visited {color: perple;}

a:hover {text-decoration: underline;}

немогу получить желаемого от FF или Chrome - а именно добиться подчеркивания при наведении и изменения цвета посещенных ссылок, кстати если к hover присвоить цвет, то это в отличие от подчеркивания работает.

Как это ни странно повидение IE6 в данном случае напротив предсказуемо - цвет посещенных ссылок меняется, подчеркивание работает.

В чем моя ошибка?

совершенно не понимая причину проблемы прикрепляю код примера:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
   <title>My page</title>

<style type="text/css">

body {
	 padding-left: 11em;
	 font-family: Georgia, "Times New Roman", Times, serif;
	 color: purple;
	 background-color: #d8da3d;}
   ul.navbar {
	 list-style-type: none;
	 padding: 0;
	 margin: 0;
	 position: absolute;
	 top: 2em;
	 left: 1em;
	 width: 9em;}
   h1 {
	 font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif }
   ul.navbar li {
	 background: white;
	 margin: 0.5em 0;
	 padding: 0.3em;
	 border-right: 1em solid black;}
   ul.navbar a {
	 text-decoration: none;}
   a:link {
	 color: blue;}
   a:visited {
	 color: perple;}
   a:hover {
	 text-decoration: underline;}
   address {
	 margin-top: 1em;
	 padding-top: 1em;
	 border-top: thin dotted;}
</style>

</head>

<body>

<!-- Site navigation menu -->
<ul class="navbar">
  <li><a href="index.html">Home page</a>
  <li><a href="musings.html">Musings</a>
  <li><a href="town.html">My town</a>
  <li><a href="links.html">Links</a>
</ul>

<!-- Main content -->
<p>There should be more here, but I don't know
what yet.</p>

<!-- Sign and date the page -->
<address>Made 20 July 2010<br>
 by myself.</address>

</body>
</html>

Edited July 20, 2010 by sashakiselev

stars · July 20, 2010

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:focus { background: yellow }

a:focus:hover { background: white }

вроде все работает...

http://www.w3.org/TR/CSS21/selector.html#d...-pseudo-classes

Edited July 20, 2010 by stars

s0rr0w · July 20, 2010

a:visited {color: perple;}

Знаю цвет purple, а perple - нет

И ul.navbar a гораздо сильнее a:hover, поэтому поведение нормальных браузеров гораздо понятнее, чем отсебятина у IE

Searcher · July 20, 2010

sashakiselev, вы забыли про то, что при вложенных селекторах разные степени вложенности имеют разную силу.

sashakiselev · July 20, 2010

s0rr0w, Searcher спасибо про 'разную силу' начинаю понимать, убрав значение none с text-decoration у ul.navbar a и a:hover присвоив наоборот text-decoration: none - все работает, т.е. псевдо-класс функционирует, но как следует поступить в данном примере (учитывая этот эффект силы) если нам нужен обратный результат?... в общем вникаю в суть по ссылке Searcher-а, я так понял ответ там.

*Высчитывать 'важность' еще не научился), но полный путь - ul.navbar a:hover {text-decoration: underline;} - решает проблему с подчеркиванием.

s0rr0w, спасибо - исправил, но увы посещенные ссылки от этого свой цвет менять не стали в ФФ или это тоже к "разной силе" имеет отношение? (хотя цвет ссылок больше нигде не фигурирует) эээ

В общем с цветом по прежнему не понятно - всю эту пищу для размышления нашел в этом простом туторе http://www.w3.org/Style/Examples/011/firstcss#links, место весьма почтенное, ну а ФФ всетаки не меняет цвет ссылок по их образцу)..?

Edited July 20, 2010 by sashakiselev

Searcher · July 20, 2010

...напрашивается вывод: может что-то с вашим ФФ? Что-то с кэшем может? )) вообще на других сайтах посещенные ссылки выделяются в вашем ФФ?

sashakiselev · July 20, 2010

Searcher, долго ломая голову где же найти ссылки, которые точно должны менять цвет убедился, что ФФ в порядке. Так что вопрос видимо к коду туториала от w3.org

Edited July 20, 2010 by sashakiselev

Searcher · July 20, 2010

если li закрыть, у меня в ФФ все работает...

да и доктайп к коду не совсем подходит, ну или код к доктайпу не подходит ))

sashakiselev · July 20, 2010

если li закрыть, у меня в ФФ все работает...
да и доктайп к коду не совсем подходит, ну или код к доктайпу не подходит ))

да доктайп, к этим незакрытым делам не подходит - эт я понимаю.. но я пробывал "ИХ" доктайп, закрывал li - один фиг

В то, что у вас "все работает" я верю конечно, но помогите разобраться - почему у меня же..

................

кажется я понял.. Searcher, дело не в закрытости li и доктайпе здесь.

При клике по ссылке ведущей на несуществующую страницу, как в примере ребят делавших туториал, "нормальные браузеры" игнорируют сам факт посещения (что вроде кажется логичным, т.к. посещения то не было).

Ну а при типовом, пробном варианте - <a href=""> без названия - ФФ и остальные работают как положено.

ЗЫ.. вроде мелочь, а может стать настоящим выносом мозга - надеюсь теперь буду помнить)

Edited July 20, 2010 by sashakiselev

Searcher · July 21, 2010

Вот блин! Я то думал, что у вас там существуют страницы на которые сделаны ссылки... Даже не стал намекать на это. Конечно несуществующие ссылки он не отображает как посещенные. У себя то я на # ссылку поменял и все работало...

Sign In

Простой вопрос по псевдо-классам

Question

sashakiselev

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

stars

Link to comment

Share on other sites

s0rr0w

Link to comment

Share on other sites

Searcher

Link to comment

Share on other sites

sashakiselev

Link to comment

Share on other sites

Searcher

Link to comment

Share on other sites

sashakiselev

Link to comment

Share on other sites

Searcher

Link to comment

Share on other sites

sashakiselev

Link to comment

Share on other sites

Searcher

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information