Стиль всех якорей, кроме тех, которые содержат изображения, без добавления класса или идентификатора к тегу изображения?

Question

В приведенном ниже примере мне нужно добавить свойства padding и background-color для привязки текста.Затем мне нужно исключить отступы и цвет фона из якорей, содержащих изображения.

<p>
  <a href="#">this is a text link that needs to be styled</a>
  <a href="#"><img src="image/name.jpg" alt="this needs to be excluded from styling" /></a>
</p>

Если у меня есть красный фон и отступы в моих текстовых ссылках, я не хочу этого жекрасный фон и отступы появляются на моих связанных изображениях.Изображения всегда будут в своих собственных якорях, не смешанных с текстом внутри одного и того же якоря.

Проблема в том, что я не могу добавить классы или идентификаторы в теги img - у меня нет контроля редактирования этих данных.

Так, как я могу добавить атрибуты CSS ко всем якорям, исключая якоря, которые содержат изображения?

Answer 1

Использование JQuery:

$(function() {
    $('a:not(:has(img))').css('background','red');
});

Answer 2

В настоящее время вы не можете выбрать родительский элемент для соответствующего дочернего селектора. Для этого вам придется использовать JavaScript.

При этом, если фон вашей страницы сплошной, вы можете использовать отрицательные поля и фон на тегах img для наложения фона a ... Вот пример. Я не проверял во всех браузерах, но, похоже, у меня работает в Safari, Firefox и MSIE8.

a {
   display: inline;
   padding:10px;
   background:red;
}

a img {
   border: none;
   vertical-align: bottom;
   margin:-10px;
   padding: 0px;
   background:white;
}