Her bağlantının yanında bir bağlantı simgesi var. Bağlantı simgesini resimlerden nasıl hariç tutarım?

Question

Sitemdeki her bağlantının yanında küçük bir resim oluştururken .css dosyasında aşağıdakileri buldum:

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

Bu bağlantıyı (veya yeni bir şey eklemek) nasıl değiştirebilirim? kendilerini bağlayan görüntüler?

Answer 1

Arka plan rengini ayarlarsanız ve görüntü üzerinde negatif bir sağa boşluğa sahipseniz, görüntü harici bağlantı görüntüsünü kaplar.

Örnek:

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>

düzenleme: Bu şeffaflık görüntüler için harika görünüyorsun gitmiyor desenli arka plan var ise. Ayrıca, href^= seçiciniz IE7 üzerinde çalışmayacaktır, ancak muhtemelen zaten bu

olduğunu biliyordunuz

Answer 2

arka planı kaldırmak için bu <a> etiketlere bir sınıf ekleyip, başka beyanı eklemek için buna değer olabilir: Bir yayılma olarak bağlantıların içerik varsa

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

Answer 3

, bunu yapabilirdi Aksi takdirde, bir senaryoyu, onu ayırt etmek için bir sınıfa vermeniz gerektiğini düşünüyorum.

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

Sen dahil veya hariç tutmak istediğiniz a elemanları ya bir sınıf adı lazım. Bunu sunucu tarafı kodunuzda veya belgelerinizde yapmak istemiyorsanız, sayfa yüklendikçe javascript ile sınıfları ekleyebilirsiniz. Başka yerde sarılmış seçimi mantığı ile, kural sadece olabilir: XPath da img çocuğu vardı a unsurları dışlayacak sizinki gibi bir desen oluşturmak için birlikte

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

da mümkün olabilecektir ancak bu tesisin defalarca olmuştur (2002, 2006, 2007) CSS için önerilen ve reddedilen, büyük ölçüde artımlı mizanpaj prensiplerine karşı gittiği gerekçesiyle.

Yani, bağlamsal seçici ve href özniteliğinde bir önek eşleşmesiyle yaptığınız gibi düzgün koşullu içerik eklemeleri yapmak mümkün olsa da, CSS genel amaçlı bir programlama dilinden oldukça zayıftır. Daha karmaşık şeyler yapmak için mantığı bir düzeye taşımanız ve işlemek için stil motoru için daha basit talimatlar yazmanız gerekir.