CSS:仅在没有内部 的 上应用样式

Question

我想将样式应用于列表中悬停的链接，但前提是内部没有图像 <a>元素。

标记是这样的:

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

和我的CSS:

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

我试过这个 css，但没有用:

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

这是 jsfiddle

Answer 1

您不能在 CSS 中根据子元素设置元素样式，您可以做的是为 <a> 分配一个特殊类保存图像并防止对其进行样式设置的标签:

<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; 
}