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

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

источник

2010-02-27 Stefano Borini

Попробуйте использовать Descendant Selectors:

a img { 
    border-bottom: none; 
}

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

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

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

border-bottom: none !important;

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

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

источник

2010-02-27 09:50:24

Уже пробовал. Не знаю, почему, но это не сработает. Изображение не имеет границы, но по какой-то причине снизу у меня все еще есть граница. Firebug выделяет только границу, когда я навешиваю на тег. и только изображение, если я нахожусь на ярлыке img ...поэтому кажется, что a подчеркивает пространства. –

Он видит оформление текста, а не фактическую 'border' –

@Squeegy: Я могу гарантировать, что я вижу границу, а не украшение текста. –

....

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

источник

2010-02-27 09:51:58 Sarfraz

Селекторы атрибутов не поддерживаются во всех браузерах. Перефразировано: IE будет зависеть от него. –

@Squeegy: Вы правы, но я думаю, что все современные браузеры поддерживают, что даже IE7, но не IE6 (конечно), исправлено в любом случае, спасибо – Sarfraz

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>

источник

2010-02-27 11:22:41

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

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

источник

2010-02-27 13:20:30 pixeltocode

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

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

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

или

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

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

источник

2010-02-28 07:50:34

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

ответ

Смежные вопросы