Как мне стилизовать только миниатюру изображения в этом посте?

Question

Мне нужна помощь с некоторыми стилями CSS. Я пробовал разные варианты с Firebug и не могу с этим разобраться. Как я могу стилизовать миниатюры в своих сообщениях (например, url: http://thatcriticguy.com/index.php?post/4/crossover-9-revamped-reinvented-and-a-must-have)) и не стилизовать все изображения в сообщении одновременно. У меня есть многочисленные посты на этом сайте, и мне нужно стилизовать только те, которые являются миниатюрами плавать вправо.

Есть ли способ сделать это без изменения кода шаблона, просто используя CSS?

Answer 1

У вас должен быть атрибут "class" на изображениях, которые вы хотите стилизовать с помощью CSS. Таким образом, ваш CSS будет работать только с изображениями, которые вы хотите.

Например, вы можете иметь этот HTML

<img src="..." class="thumbnail"/>

и этот CSS:

.thumbnail {...}

Answer 2

Если структура ваших сообщений всегда идентична, это должно сработать:

.post-content p:first-child img
 { float: right }

Он обращается ко всем элементам img в первом абзаце ниже post-content.

Не поддерживается IE 6. Источник на Quirksmode.org

Answer 3

Нет способа использовать чистый CSS, потому что миниатюры не имеют идентификатора, который может отличить их от других изображений. Вы можете либо изменить код шаблона, либо использовать javascript, чтобы выбрать первое изображение в сообщении и применить к нему стиль.