Nein, derzeit gibt es in CSS keinen Selektor, der Elemente auf der Basis ihrer Nachkommen auswählen würde. Sie müssten JavaScript oder Klassen in CSS verwenden.
Am robustesten würden Sie ein class
-Attribut für alle Links verwenden, die kein Bild enthalten, und einen entsprechenden Klassenselektor in Ihrer CSS-Regel verwenden.
Wenn die meisten Ihrer Links kein Bild enthalten, können Sie negative Ansätze verwenden und eine Klasse für die Links festlegen, die ein Bild enthalten, zB class=imagelink
, und einen :not(.imagelink)
Selektor in CSS verwenden. Unterstützung für :not(...)
ist weit verbreitet, aber nicht universell. Ein weiterer Ansatz, der nicht auf eine solche Unterstützung setzt, ist, alle Links wie in Ihrer Frage unten zu setzen und dann für Bildlinks zu deaktivieren:
Nicht möglich, leider! Ich denke, ich habe das nur mit jquery gemacht.
Komplexer CSS-Selektor für Eltern des aktiven untergeordneten Elements
Es ist nicht möglich, css
zu verwenden, aber Sie können css
verwenden, wenn Sie cssParentSelector.js hinzufügen Skript, das jQuery
verwendet. Hier ist ein Beispiel
über css
Regel entfernt den Rahmen vom a
-Tag, wenn es das übergeordnete Element eines img
-Tags ist, aber immer noch nicht rein css
, hat Abhängigkeiten.
Der vertical-align
Trick funktioniert nur [gut] mit nicht transparenten Bildern und funktioniert überhaupt nicht, wenn a
line-height
größer als die Bildhöhe ist (denke an kleine Social-Networking-Icons).
Ich wünschte, ich könnte die akzeptierte Lösung hier verwenden, aber es wirft die Ausrichtung von Inline-Bildern in Textblöcken zusammen mit den oben genannten Problemen aus.
Ich habe beschlossen, eine solide weiße box-shadow
am unteren Rand von a > img
zu machen, vielleicht eine Sicherung filter
shadow für IE8 und älter, und nenne es einen Tag. Verwechselt das Layout nicht:
Wie bereits bei anderen Antworten auf Ihre Frage gesagt, ist es mit CSS nicht möglich, dies jetzt zu tun. Aber wenn Sie jQuery verwenden, funktioniert das großartig:
%Vor%Im Grunde nach dem Laden der Seite suchen Sie die Links, die ein Bild enthalten, und geben Sie die css-Regel border: none; für das Elternelement des Bildes an. der Link.