Ich habe ein Link-Symbol neben jedem Link. Wie schließe ich das Verknüpfungssymbol von Bildern aus?

Question

Ich habe folgendes in meiner CSS-Datei bekommt ein kleines Bild neben jeden Link auf meiner Website zu erstellen:

div.post .text a[href^="http:"] 
{ 
    background: url(../../pics/remote.gif) right top no-repeat; 
    padding-right: 10px; 
    white-space: nowrap; 
} 

Wie kann ich diesen Schnipsel ändern (oder etwas Neues hinzuzufügen) neben dem Link-Symbol auszuschließen zu Bildern, die selbst Links sind?

Answer 1

Wenn Sie die Hintergrundfarbe festlegen und einen negativen rechten Rand auf dem Bild haben, wird das Bild das Bild des externen Links abdecken.

Beispiel:

a[href^="http:"] { 
 
    background: url(http://en.wikipedia.org/skins-1.5/monobook/external.png) right center no-repeat; 
 
    padding-right: 14px; 
 
    white-space: nowrap; 
 
} 
 
a[href^="http:"] img { 
 
    margin-right: -14px; 
 
    border: medium none; 
 
    background-color: red; 
 
}

<a href="http://www.google.ca">Google</a> 
 
<br/> 
 
<a href="http://www.google.ca"> 
 
    <img src="http://upload.wikimedia.org/wikipedia/en/thumb/4/4a/Commons-logo.svg/50px-Commons-logo.svg.png" /> 
 
</a>

edit: Wenn Sie schon einen gemusterten Hintergrund habe dies nicht für Bilder gut aussehen wird, die Transparenz haben. Auch Ihr href^= Selektor funktioniert nicht auf IE7, aber Sie wussten wahrscheinlich bereits, dass

Answer 2

Es könnte sich lohnen, eine Klasse zu jenen <a> Tags hinzuzufügen und dann eine andere Erklärung geben Sie den Hintergrund zu entfernen:

div.post .text a.noimage{ 
    background:none; 
} 

Answer 3

Wenn Sie den Inhalt der Links als Spanne haben, können Sie dies tun Ansonsten denke ich, dass Sie einem Szenario eine Klasse geben müssen, um es zu unterscheiden.

a > span { 
    background: url(../../pics/remote.gif) right top no-repeat; 
    padding-right: 10px; 
    white-space: nowrap; 
} 
a > img { 
    /* any specific styling for images wrapped in a link (e.g. polaroid like) */ 
    border: 1px solid #cccccc; 
    padding: 4px 4px 25px 4px; 
} 

Answer 4

Sie benötigen einen Klassennamen entweder auf den a Elemente Sie ein- oder ausschließen. Wenn Sie dies nicht in Ihrem serverseitigen Code oder den serverseitigen Dokumenten tun möchten, können Sie die Klassen beim Laden der Seite mit JavaScript hinzufügen. Mit der Auswahllogik an anderer Stelle eingewickelt solche Regel können Sie nur sein:

a.external_link 
{ 
    background: url(../../pics/remote.gif) right top no-repeat; 
    padding-right: 10px; 
    white-space: nowrap; 
} 

es möglich wäre, mit XPath ein Muster wie bei Ihnen zu schaffen, die auch a Elemente ausschließen würden, die img Kinder hatten, aber diese Anlage wiederholt wurde (2002, 2006, 2007) vorgeschlagen und abgelehnt für CSS, vor allem aus dem Grund, dass es gegen die inkrementellen Layout-Prinzipien verstößt.

So, während es möglich ist, ordentlich bedingten Inhalt Ergänzungen wie Sie mit einem kontextabhängigen Selektor und eine Präfix Übereinstimmung auf dem href Attribut zu tun, CSS ist erheblich schwächer als eine allgemeine Programmiersprache. Um komplexere Dinge zu tun, müssen Sie die Logik um eine Ebene nach oben verschieben und einfachere Anweisungen für die Style-Engine schreiben.