Селектор CSS: почти пустой?

Я знаю, что псевдокласс класса :empty выберет все элементы без детей, но я хочу только выбирать элементы с текстовыми узлами в качестве дочерних.Селектор CSS: почти пустой?

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

Я попытался установить a *:not(*){ border-bottom-width: 0; }, но это не сработало. Есть ли способ выбрать теги a только для текстовых узлов для детей?

источник

2013-02-26 ITS Alaska

В итоге я просто использовал jQuery. Я не думаю, что это возможно только с помощью CSS.

jQuery('document').ready(function(){ 
    jQuery("a").each(function(){ 
     if(this.children.length !== 0) 
      this.style.borderBottomWidth='0'; 
    }); 
});

источник

2013-02-26 18:53:05

Если я правильно понимаю вашу проблему, вы пытаетесь подчеркнуть гиперссылки изображений. Если да, почему бы не сделать что-то вроде: a img { text-decoration:none }?

Edit: Если его ссылки на IMG теги вы не хотите, подчеркнутый, применить класс к этим ссылкам с text-decoration:none

источник

2013-02-26 00:50:04

, поскольку IMG не будет подчеркнут, но '' ссылка будет –

Это не представляется возможным. Это Wordpress, и мы разрабатываем это для группы людей, которые не будут знать, как разместить ссылки в определенном классе. Кроме того, уже есть 'text-decoration: none;' на '' тегах и '' тегах. Проблема в том, что есть нижняя граница. –

@ user1813212 Ну, я не знаю, что сказать вам о ваших пользователях, кроме как попытаться их обучить. Классы CSS примерно так же просты, как и ИМХО. Но вы также можете применить класс, который удаляет нижнюю границу. –

НОВЫЙ ОТВЕТ:

Если вы хотите границу под изображение, а не текст этого:

a img { border-bottom: 1px solid #000; } 
a:emtpy { border: none; }

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

a:empty { border-bottom: 1px solid #000; } 
a img { border: none; }

OLD ОТВЕТ:

Если это просто проблема с изображениями, которые обернуты в тегах, попробуйте:

a img { border-bottom: none; }

источник

2013-02-26 00:51:11

Подчеркнуто на ** ссылка **, а не на изображение –

Ваш обновленный ответ не работает. В теге '' есть текстовый узел, который не позволяет ему выбирать псевдо-класс ': empty'. –

Когда ТОЛЬКО ДЕТЯМ из <a> не является img ...

a:only-child:not(img) 
{ 
    border-bottom-width: 1; 
}

источник

2013-02-26 01:03:18

Кажется, это должно сработать, но это не так. Я не думаю, что текстовый узел распознается как дочерний, за исключением псевдокласса ': empty', который заставляет меня начать думать, что это невозможно без Javascript. –

Вместо сумасшедшей селектор, почему бы не скрыть границы с отрицательным запасом:

a img { 
    margin-bottom: -6px; 
}

Demo

источник

2013-02-26 01:06:05 bookcasey

Некоторые из связанных изображений имеют прозрачный фон. –

Не могли бы вы установить белый фон для 'img', или это будет выглядеть плохо? – bookcasey

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

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

Что я предлагаю вернуться к text-decoration собственности * в то же время сохраняя другую, независимую подчеркивание colour` - аккуратный подход в целом, но не без накладных дополнительного элемента:

<style> 
.fancy-underline { color:blue; text-decoration:underline; } 
.fancy-underline a { color:black; text-decoration:none; } 
</style> 
<span class="fancy-underline"><a href="#">I am a fancy link 
    <img src="//placekitten.com/30/30/" /> with an image in the middle of it 
</a></span>

http://jsfiddle.net/ovfiddle/TwmmF/3/

источник

2013-02-26 03:53:24

Селектор CSS: почти пустой?

ответ

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