Объясните разницу

[Alex&R]

Здравствуйте. Объясните разницу между:

html - <a class="more" href="...">Ссылка >>></a> CSS - a.more { ... }

и

html - <div class="more"><a href="...">Ссылка >>></a></div> CSS - .more { ... }

Или можно представлять в обоих примерах?

[sigma77]

Здравствуйте. Объясните разницу между:

html - <a class="more" href="...">Ссылка >>></a> CSS - a.more { ... }

и

html - <div class="more"><a href="...">Ссылка >>></a></div> CSS - .more { ... }

Или можно представлять в обоих примерах?

В первом случае ты задаёшь стили непосредственно для ссылки.

Во втором, для дива, а дальше элемент <a> наследует стили, которые могут быть унаследованы. Кроме того у ссылок есть стили, которые задаются самим браузером. Они переопределяют наследуемые стили (например: цвет, подчеркивание).

Почитай про наследование стилей, ну и заодно про каскад и специфичность на будущее

[Int]

А ещё вместо >>> должны быть >>>

[swetlana]

А ещё вместо >>> должны быть >>>

а ещё лучше:

<a class="more" href="...">Ссылка</a>

a.more:after {
content: ' >>>';
}

[Tmin10]

А разве там не 2 двоеточия? ( : : )

Потом проблемы с IE могут быть...

Edited January 25, 2011 by Tmin10

[swetlana]

http://www.w3.org/TR/CSS2/selector.html#before-and-after

http://www.w3.org/TR/css3-selectors/#gen-content

как раз таки IE с трудом понимает css3, но более-менее успешно переваривает css2

[Alex&R]

а ещё лучше:

<a class="more" href="...">Ссылка</a>

a.more:after {
content: ' >>>';
}

Почему-то твой вариант "не работает".

[Int]

В каком браузере не работает?

[Alex&R]

В каком браузере не работает?

Во всех. Так и выводит:

Сылка >>>

[SelenIT]

Что в общем-то логично. Откуда CSS-у знать HTML-ные мнемоники? По идее, надо было content: '\00A0\003E\003E\003E'.

[acid]

Здравствуйте. Объясните разницу между:

html - <a class="more" href="...">Ссылка >>></a> CSS - a.more { ... }

и

html - <div class="more"><a href="...">Ссылка >>></a></div> CSS - .more { ... }

Или можно представлять в обоих примерах?

в первом случае задаются стили для всех ССЫЛОК с классом class="more".

<!-- стиль присвоется только ссылкам -->
<a class="more" href="#">Ссылка 1</a>
<a class="more" href="#">Ссылка 2</a>

<div class="more">Содержание</div>

во втором - стили задаются ВСЕМ элементам (div, a, span и т.д.) с классом class="more"

<!-- стиль присвоется и ссылкам и контенеру div -->
<a class="more" href="#">Ссылка 1</a>
<a class="more" href="#">Ссылка 2</a>

<div class="more">Содержание</div>

[Alex&R]

Что в общем-то логично. Откуда CSS-у знать HTML-ные мнемоники? По идее, надо было content: '\00A0\003E\003E\003E'.

А как на счет отображения в IE6?

[Vlad]

IE6 не поддерживает content.

[Alex&R]

А как называются правильно эта мнемоника 00A0, 003E...?

Edited February 4, 2011 by Alex&R

[Vlad]

Код символа в Юникоде.

[Alex&R]

Всем большое спасибо за ответы. Много полезного почерпнул.