CSS: yalnızcanumaralı iç stili <img>

Question

olmadan uygulayabilirsiniz. Bir listeden, ancak yalnızca <a> öğesinin içinde görüntü yoksa, stilleri bir listede stil uygulamak istiyorum.

<div id="leftcolumn"> 
    <ul> 
    <li><a href="http://google.com">google</a></li> 
    <li><a href="http://google.com"><img src="http://cso.cz/wpimages/cz2.gif"></a></li> 
    </ul> 
</div> 

ve benim css: boşuna bu css denedi

div#leftcolumn ul a:hover{ 
    background-color: #F8F8F8; 
    color: Black; 
    border-bottom: 1px solid Black; 
} 

ama:

İşte

div#leftcolumn ul a:hover < img{ 
    background-color: #F8F8F8; 
    color: Black; 
    border-bottom: 1px solid Black; 
} 

jsfiddle olduğunu

biçimlendirme böyledir

Answer 1

: CSS o çocukları dayanan bir element stil olamaz, ne yapmak görüntüyü tutun ve onu stil engellemek <a> etiketleri için özel bir sınıf atamak olduğunu.

Ancak, bir <span> metni sarabilirdiniz ve sadece orada kurallarını uygulamak yani bir şey gibi:

<div id="leftcolumn"> 
    <ul> 
    <li><a href="http://google.com"><span>google</span></a></li> 
    <li><a href="http://google.com"><img src="http://cso.cz/wpimages/cz2.gif"></a></li> 
    </ul> 
</div> 

CSS:

div#leftcolumn ul a:hover > span { 
    background-color: #F8F8F8; 
    color: Black; 
    border-bottom: 1px solid Black; 
} 

Updated JSFiddle

Answer 2

Ben bu saf CSS mümkündür şüphe

<div id="leftcolumn"> 
     <ul> 
     <li><a href="http://google.com">google</a></li> 
     <li><a href="http://google.com" class="withImage"><img src="http://cso.cz/wpimages/cz2.gif"></a></li> 
     </ul> 
</div> 

div#leftcolumn ul a:not(.withImage):hover{ 
    background-color: #F8F8F8; 
    color: Black; 
    border-bottom: 1px solid Black; 
    border-top: 1px solid black; 
} 

Answer 3

.non-img eklemek için li, numaralı telefon numarası olmadan . img

div#leftcolumn ul li.non-img a:hover{ 
 
    background-color: #F8F8F8; 
 
    color: Black; 
 
    border-bottom: 1px solid Black; 
 
    border-top: 1px solid black; 
 
}

<div id="leftcolumn"> 
 
     <ul> 
 
     <li class="non-img"><a href="http://google.com">google</a></li> 
 
     <li><a href="http://google.com"><img src="http://cso.cz/wpimages/cz2.gif"></a></li> 
 
     </ul> 
 
</div>