CSS-Selektor: fast leer?

Ich bin mir bewusst, dass die Pseudo-Klasse :empty alle Elemente ohne Kinder auswählen wird, aber ich möchte nur Elemente mit Text-Knoten als untergeordnete Elemente auswählen.CSS-Selektor: fast leer?

Ich habe einen unteren Rand auf meinen Hyperlinks, die eine andere Farbe als der Text sind, aber das ist ein Problem, weil die verlinkten Bilder auch diese Unterstreichung bekommen.

Ich habe versucht a *:not(*){ border-bottom-width: 0; } in einem Versuch, das zu beheben, aber es hat nicht funktioniert. Gibt es eine Möglichkeit, a Tags mit nur Textknoten für Kinder auszuwählen?

Quelle

2013-02-26 ITS Alaska

Ich landete nur mit jQuery. Ich glaube nicht, dass es gerade jetzt mit CSS möglich ist.

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

Quelle

2013-02-26 18:53:05

Wenn ich Ihr Problem richtig verstehe, versuchen Sie Ihre unterstrichenen Bilder nicht zu unterstreichen. Wenn ja, warum nicht etwas tun wie: a img { text-decoration:none }?

Edit: Wenn seine Links auf img-Tags Sie mit text-decoration:none

Quelle

2013-02-26 00:50:04

weil das img nicht unterstrichen werden, aber der '' Link –

sein wird, das nicht machbar ist. Es ist Wordpress, und wir entwickeln das für eine Gruppe von Leuten, die nicht wissen, wie man die Links in eine bestimmte Klasse bringt. Außerdem gibt es bereits eine 'text-decoration: none;' auf den '' Tags und' ' Tags. Das Problem ist, dass es eine untere Grenze gibt. –

@ user1813212 Nun, ich weiß nicht, was ich Ihnen über Ihre Benutzer erzählen soll, außer sie zu erziehen und zu erziehen. CSS-Klassen sind so einfach wie es geht IMHO. Sie können jedoch auch eine Klasse anwenden, die den unteren Rand entfernt. –

NEW ANTWORT eine Klasse diese Links nicht unterstrichenen wollen, gelten:

Wenn Sie eine Grenze unter möchten die Bild, nicht aber der Text dies tun:

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

Wenn Sie das Gegenteil (Grenze unter dem Text, aber nicht das Bild) wollen dies tun:

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

ALTE ANTWORT:

Wenn es nur ein Problem mit Bildern, die in a-Tags eingewickelt sind, versuchen Sie:

a img { border-bottom: none; }

Quelle

2013-02-26 00:51:11

Die Unterstreichung ist auf ** Link **, nicht auf Bild –

Ihre aktualisierte Antwort funktioniert nicht. Es gibt einen Textknoten im ''-Tag, der verhindert, dass er von der Pseudo-Klasse': empty' ausgewählt wird. –

Wenn die ONLY CHILD von <a> keine ist img ...

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

Quelle

2013-02-26 01:03:18

Es scheint, dass dies funktionieren sollte, aber es nicht funktioniert. Ich glaube nicht, dass ein Textknoten als Kind erkannt wird, außer mit der Pseudo-Klasse ': empty', was mich dazu bringt zu glauben, dass dies ohne Javascript nicht möglich ist. –

Statt eines verrückten Wähler, warum nicht die Grenze mit einer negativen Marge verstecken:

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

Demo

Quelle

2013-02-26 01:06:05 bookcasey

Einige der verknüpften Bilder haben transparente Hintergründe. –

Könnten Sie einen weißen Hintergrund für das 'img' setzen, oder würde das schlecht aussehen? – bookcasey

Ich könnte, aber verschiedene Bilder würden andere Hintergrundfarben benötigen, und einige können sogar Teile von Farbverläufen sein. Ich würde es gerne vermeiden, wenn es möglich ist, aber das muss vielleicht sein, was ich tue, wenn es keine anderen vernünftigen Antworten gibt. –

Dies kann nicht wegen der Art und Weise erreicht werden border Eigenschaft angewendet wird und außerhalb der meisten Top-Box gerendert von Ihrem Anker - effektiv die einzige Möglichkeit, einen solchen Effekt mit einer Grenze zu erzielen, wäre, die Eigenschaft zu negieren. Manchmal kann es visuell akzeptabel sein, einen unteren Rand in einer Hintergrundfarbe zu verwenden, um ihn über dem deines Ankers zu überlagern - eine unzuverlässige Praxis, die man nicht mag. Vielleicht könnte der Effekt mit Filtern simuliert werden, aber ich würde nicht darauf zählen, dass er über Browser ausreichend gut unterstützt wird.

Was ich vorschlage, geht zurück auf die text-decoration Eigenschaft *, während immer noch eine andere, unabhängige Unterstreichungs colour` Aufrechterhaltung - einen ordentlichen Ansatz insgesamt, aber nicht ohne den Aufwand eines zusätzlichen Elements:

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

Quelle

2013-02-26 03:53:24

CSS-Selektor: fast leer?

Antwort

Verwandte Themen