: первый буквы CSS - ограничивая его первую букву статьи в шаблоне

Question

У меня возникли проблемы ориентируется только первая буква в этом примере здесь: http://jsfiddle.net/gB94x/

Очевидно, что «читать далее» не допускается иметь капсюлю.

HTML не может быть изменен, это часть фиксированного шаблона.

Спасибо!

Answer 1

.od_article>p ссылки все p теги, которые являются непосредственными детьми .od_article, и в этом ваша проблема. Вам нужен только первый тег p. Измените .od_article>p:first-letter на .od_article>p:first-of-type:first-letter как в обновленной скрипке ниже.

http://jsfiddle.net/gB94x/1/

UPDATE:

Я не верю, IE7 поддерживает :first-of-type к сожалению. Я не уверен, поддерживает ли он :first-child, но для справки, :first-child соответствует, если элемент, к которому он применяется, является первым дочерним элементом его родителя.

Я не могу придумать обходной путь с головы, но, глядя на HTML p, вы хотите изменить первую букву для класса CaptionPic1. Если первый абзац всегда будет иметь этот класс, просто используйте его, поэтому .CaptionPic1:first-letter.

Answer 2

Ваш селектор:

.od_article>p:first-letter 

пытается применить стили к первой букве каждыйp ребенка, родитель которого имеет класс od_article.

Вы можете использовать это, чтобы получить первый p элемент:

.od_article>p:first-of-type:first-letter 

Или, если вам необходимо поддерживать старые браузеры, такие как IE7 и IE8, которые не понимают CSS3 псевдо-классы, такие как :first-of-type, и вы знаете, что первый ребенок всегда h1 и первый p всегда следует, что h1 в вашей HTML-структуры, вы можете использовать :first-child с селектором родственного, как это:

.od_article>h1:first-child+p:first-letter 

jsFiddle preview