Выберите все теги <a>, кроме тегов <a>, которые содержат тег <img>в CSS

Question

Я хочу, чтобы все текстовые ссылки на моем сайте имели нижнюю границу. Я использую:

a
{
    border-bottom: 1px dotted #333;
}

... но к ссылкам на изображения добавляется граница, и я этого не хочу.

Как мне заставить работать только текстовые ссылки?

Answer 1

a { border-bottom:1px dotted #333; }
a img { border:0; }

Просто переопределите унаследованное правило, собственный путь CSS.

Редактировать: Вау, я действительно не обращаю внимания.Можете ли вы просто бросить класс в якоря, содержащие изображения?

a.contains-image { border:0; }

Это будет единственное решение без использования сценариев без использования селектора not CSS3.

Answer 2

Добавление границы для ссылок и удаление ее, если она содержит некоторые img, невозможно в CSS, с или без: not ()
Вы не можете выбрать элемент в зависимости от его потомков (CSS не XPath), и вы не можете повлиять на стиль родителей.

Я бы использовал селекторы jQuery (если быть точным, Sizzle) и добавил класс в зависимости от наличия изображения:

<style type="text/css">
  .underline { border: 4px dotted #333; }
  a img { border:0; /* remove the default blue border from images within links */}
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    $('a:not(:has(img))').addClass('underline');
  });

Еслиу вас есть не только 100% текст и ссылки> img: only-child, но также текст + img, смешанный в ссылках, вы также можете нацеливать img:only-child или переносить текст в ссылках (кроме img) в span элементах, чтобыстиль смешанных ссылок определенным образом, если у вас есть эти крайние случаи на вашей странице.

Answer 3

Добавить это:

img {
    border: none;
}

Это избавит от границ на изображениях.