CSS - удалить фон из ссылки, когда родитель изображения

Question

Я даю своим ссылкам цвет фона, чтобы они выделялись, проблема в том, что они также будут применяться к ссылкам, которые имеют изображения как дочерние, а не текстовые.В результате изображение имеет небольшой фон в нижней части.(см .: http://blog.cmstutorials.org/reviews/general/featured-tutorial-of-the-week-05-feb-2011)

Как удалить фон ссылок, когда у него есть img в детстве?Я думал, что что-то вроде этого будет работать:

.featured_tutorial img < a

Answer 1

CSS не поддерживает селектор parent.

Вы должны использовать такие классы, как a.this_link_contanis_img{ /*override background*/ }

Или, возможно, вы можете установить новое свойство для img.Это может скрыть фон ссылки.

.featured_tutorial img{ /*override background*/ }

Редактировать: Хорошо, это не сработает в вашем случае ..

Answer 2

Как уже указывалось, у CSS нет способа поиска "дерева" DOM. Это в основном сводится к соображениям производительности. (Вот одно объяснение .)

Но если вы не против иногда необходимого зла, связанного с использованием такого рода Javascript, jQuery имеет : родительский селектор .

Answer 3

Как уже упоминалось, нет CSS исправления, но, поскольку вы уже используете jQuery, это единственный способ, которым я могу думать об этом

http://jsfiddle.net/vrqCV/

jQuery(document).ready(function() {
    jQuery("a:not(:has(img))").addClass("bg");
 });

Answer 4

У него фоновая утечка внизу, потому что изображения являются встроенными элементами уровня по умолчанию и расположены на базовой линии текстовой строки, на которой они размещены, таким образом, существует разрыв между базовой линией и линией спуска, которая вызывает утечку цвета.Вы можете избавиться от этого двумя способами.Установите css для:

a img { display: block; }

или если вы хотите, чтобы отображение оставалось встроенным

a img { vertical-align: bottom }

, это должно решить вашу проблему, поскольку оно выровняет изображение по линии спуска текстастрока, в которую помещается изображение в режиме инлайн.

Надеюсь, это поможет,

T.

Answer 5

Каскадные таблицы стилей не позволяют получить доступ к элементам «назад».Вы можете получить доступ только к дочерним элементам, а не к их родителям.