Как сопоставить элемент, содержащий другой элемент?

Question

В CSS я хочу, чтобы все ссылки имели свойство border-bottom: 1px solid. Однако, если у меня есть связанное изображение, оно также получает границу. Как я могу изменить свойство, если и только если оно содержит элемент img?

Answer 1

a { text-decoration: none }

Вы видите текстовое оформление, подчеркнутое по умолчанию для ссылок. Однако вы не можете изменить стиль тегов a, если они содержат тег img. CSS просто так не работает. Вы можете добавить класс к любому a с изображением и назначить стиль на его основе.

CSS

a.image { text-decoration: none }

HTML

<a href="foo" class="image"><img src="foo.jpg"/></a>

Answer 2

Попробуйте использовать Селекторы потомков :

a img {
    border-bottom: none;
}

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

a img {
    color: red;
    background-color: red;
    border-bottom: none;
}

Когда селектор работает правильно, вы можете сосредоточиться на неработающем утверждении (однако, не забудьте удалить сумасшедшие утверждения!). Возможно, он где-то переопределен, поэтому попробуйте добавить !important в конец оператора:

border-bottom: none !important;

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

Если это по-прежнему не работает, убедитесь, что вы переопределяете правильное свойство на правильное значение.

Answer 3

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

Съемка в темноте, я предлагаю указать ширину границы:

a { border-bottom: 1px solid blue; }
a img { border-width: 0 0 0 !important; }

или

a img { border-bottom-width:0; }

И если бы не один из них, я бы начал рассматривать любые другие стили, которые будут перекрываться (не обязательно наследоваться, просто влияя на визуальное пространство при наведении), такие как отступы, поля и цвета фона содержащих элементов. *

Answer 4

почему бы вам не обернуть <img> в <span>, а затем использовать CSS

a {border-bottom: 1px solid #33ccff;}
span a {border: none;}

Answer 5

....

<style>
  a{border-bottom: 1px solid;}
  a img{border:none;}
</style>