CSS Selector: prawie pusty?

Jestem świadomy, że pseudo-klasa :empty wybierze wszystkie elementy bez dzieci, ale chcę tylko zaznaczyć elementy z tekstem węzły jak dzieci.CSS Selector: prawie pusty?

Mam dolne obramowanie na moich hiperlinkach, które różnią się kolorem od tekstu, ale jest to problem, ponieważ hiperłącza również są podkreślane.

Próbowałem a *:not(*){ border-bottom-width: 0; } starając się naprawić to, ale to nie działa. Czy istnieje sposób wybierania tagów a tylko z węzłami tekstowymi dla dzieci?

Źródło

2013-02-26 ITS Alaska

Skończyłem właśnie przy użyciu jQuery. Nie wierzę, że jest to możliwe dzięki właśnie CSS teraz.

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

Źródło

2013-02-26 18:53:05

Jeśli rozumiem Twojego problemu poprawnie, starają się zachować swoje obrazy z hiperłączami podkreślono. Jeśli tak, dlaczego nie zrobić coś takiego: a img { text-decoration:none }?

Edit: jeśli jego linki w tagach img nie chcesz podkreślony, stosuje się klasę tych linków z text-decoration:none

Źródło

2013-02-26 00:50:04

ponieważ img nie będą podkreślone, ale link '' będzie –

To nie jest wykonalne. To Wordpress, a my rozwijamy to dla grupy osób, które nie będą wiedziały, jak umieścić linki w konkretnej klasie. Ponadto, istnieje już 'text-decoration: none;' na znacznikach '' i ''. Problem polega na tym, że istnieje dolna granica. –

@ user1813212 Cóż, nie wiem, co powiedzieć o twoich użytkownikach, tylko spróbuj i ucz ich. Klasy CSS są tak proste, jak robi się IMHO. Ale możesz też zastosować klasę, która usuwa dolną granicę. –

NEW odpowiedź:

Jeśli chcesz granicy w ramach obraz, ale nie tekst to zrobić:

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

Jeśli chcesz odwrotny (granica pod tekstem, ale nie obrazu) to zrobić:

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

OLD ODPOWIEDŹ:

Jeśli jest to tylko problem z obrazami, które są zapakowane w tagach, spróbuj:

a img { border-bottom: none; }

Źródło

2013-02-26 00:51:11

podkreślenie jest włączone ** link **, a nie obraz –

Zaktualizowana odpowiedź nie działa. W tagu '' znajduje się węzeł tekstowy, który uniemożliwia jego wybór przez pseudoklasę ': empty'. –

Gdy jedynakiem z <a> nie jest img ...

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

Źródło

2013-02-26 01:03:18

Wygląda na to, że to powinno działać, ale tak nie jest. Nie sądzę, że węzeł tekstowy jest rozpoznawany jako dziecko, z wyjątkiem pseudoklasii ': empty', co powoduje, że zaczynam myśleć, że to niemożliwe bez JavaScriptu. –

Zamiast szalonej selektora, dlaczego nie ukryć granicę z ujemną marżą:

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

Demo

Źródło

2013-02-26 01:06:05 bookcasey

Niektóre z połączonych obrazów mają przezroczyste tło. –

Czy możesz ustawić białe tło dla 'img', czy może wyglądałoby to źle? – bookcasey

Mogłem, ale różne obrazy wymagałyby różnych kolorów tła, a niektóre mogą nawet być częściami gradientów. Chciałbym tego uniknąć, jeśli to możliwe, ale może to być właśnie to, co robię, jeśli nie ma innych rozsądnych odpowiedzi. –

To nie może być dokonany ze względu na sposób border nieruchomość jest stosowana i świadczonych poza najwyższym, pudełka twojej kotwicy - w praktyce jedynym sposobem osiągnięcia takiego efektu przy granicy byłoby negowanie własności. Czasami można wizualnie zaakceptować użycie dolnego obramowania w kolorze tła, który nakładałby się na kolor twojej kotwicy - niewiarygodna praktyka, na którą można się marszczyć. Być może efekt może być symulowany za pomocą filtrów, ale nie liczę na to, że jest wystarczająco dobrze obsługiwana w różnych przeglądarkach.

Co proponuję wraca do nieruchomości text-decoration * zachowując inny, niezależny podkreślenia colour` - wymienia ogólne podejście, ale nie bez obciążania dodatkowy element:

<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/

Źródło

2013-02-26 03:53:24

CSS Selector: prawie pusty?

Odpowiedz

Powiązane problemy