У меня есть значок ссылки рядом с каждой ссылкой. Как исключить значок ссылки из изображений?

Question

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

div.post .text a[href^="http:"]
{
    background: url(../../pics/remote.gif) right top no-repeat;
    padding-right: 10px;
    white-space: nowrap;
}

Как изменить этот фрагмент (или добавить что-то новое), чтобы исключить значок ссылки рядом с изображениями, которые сами являются ссылками?

Answer 1

Если установить цвет фона и иметь отрицательное правое поле на изображении, изображение покроет изображение внешней ссылки.

Пример:

a[href^="http:"] {
  background: url(http://en.wikipedia.org/skins-1.5/monobook/external.png) right center no-repeat;
  padding-right: 14px;
  white-space: nowrap;
}
a[href^="http:"] img {
  margin-right: -14px;
  border: medium none;
  background-color: red;
}

<a href="http://www.google.ca">Google</a>
<br/>
<a href="http://www.google.ca">
  <img src="http://upload.wikimedia.org/wikipedia/en/thumb/4/4a/Commons-logo.svg/50px-Commons-logo.svg.png" />
</a>

edit: Если у вас есть узорчатый фон, он не будет отлично смотреться на изображениях с прозрачностью. Кроме того, ваш href^= селектор не будет работать в IE7, но вы, вероятно, уже знали, что

Answer 2

Возможно, стоит добавить класс к этим тегам <a>, а затем добавить еще одно объявление для удаления фона:

div.post .text a.noimage{
   background:none;
}

Answer 3

Вам необходимо указать имя класса для элементов a, которые вы хотите включить или исключить. Если вы не хотите делать это в своем коде или документах на стороне сервера, вы можете добавить классы с помощью javascript по мере загрузки страницы. С логикой выбора, заключенной в другом месте, ваше правило может быть следующим:

a.external_link
{
    background: url(../../pics/remote.gif) right top no-repeat;
    padding-right: 10px;
    white-space: nowrap;
}

Можно было бы с помощью XPath создать шаблон, подобный вашему, который бы также исключал a элементов, у которых было img потомков, однако это средство было неоднократно ( 2002 , 2006 , 2007 ) предложено и отклонено для CSS, в основном на том основании, что оно противоречит принципам инкрементного макета.

Таким образом, хотя можно выполнять аккуратные добавления условного содержимого, как это делается с помощью контекстного селектора и совпадения префикса для атрибута href, CSS значительно слабее, чем язык программирования общего назначения. Чтобы делать более сложные вещи, вам нужно переместить логику на уровень и написать более простые инструкции для обработчика стилей.

Answer 4

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

a > span {
  background: url(../../pics/remote.gif) right top no-repeat;
  padding-right: 10px;
  white-space: nowrap;
}
a > img {
  /* any specific styling for images wrapped in a link (e.g. polaroid like) */
  border: 1px solid #cccccc;
  padding: 4px 4px 25px 4px;
}