p: первый ребенок не работает, если img-тег сразу после тега p?

Question

Hy там, не может сделать его работу у меня есть что-то вроде этого

.body-post p:first-child:first-letter 
    { 
    font-size:240%; 
    } 

и здесь HTML:

<div class="body-post"> 
    <p><img src="http://#" align="left" style="margin-right:5px;"/> 
    some text</p></div> 

Так что, если Theres Нет изображения первые буквы работ. Есть ли способ пропустить тег img. Я не могу отредактировать исходный код, потому что я делаю некоторый шаблон для домена blogger. ничего серьезного, его просто так запутанно. первая буква должна выбрать букву, а не изображение.

Answer 1

После некоторого количества research Я узнал, что первая буква может использоваться только на элементах блока (что вы делали).

В этом решении я увеличил избирательность текста, окружив его пролетом и поставить в правильном стайлинга, чтобы продолжительность инлайн-BLOCK

http://jsfiddle.net/52Vjm/1/

<div> 
    <p> 
     <img src="http://placekitten.com/100/100"/> 
     <span>Kittens are great</span> 
    </p> 
</div> 

span:first-letter { font-size:2em; } 
span { display:inline-block; } 
img { margin-right:5px; } 

Answer 2

Поместите изображение в сторону метки P и используйте следующее. Изображение будет по-прежнему разрешать перенос P, поскольку это то, что плавает элемент.

.body-post > p:first-child:first-letter { 
    font-size:240%; 
} 

    <div class="body-post"> 
    <img src="http://#" align="left" style="margin-right:5px;"/> 
    <p>some text</p> 
</div> 

// Сторона примечания, старайтесь избегать использования встроенных стилей, когда это возможно. Он может мешать JS и медиа-запросам/