css - 当图像的父级时从链接中删除背景

Question

我为我的链接提供了背景颜色以使其脱颖而出，问题是它也适用于将图像作为子图而不是文本的链接。结果是图像底部有一个小背景。 （见：http://blog.cmstutorials.org/reviews/general/featured-tutorial-of-the-week-05-feb-2011）

如果我有一个孩子的img，我如何删除链接的背景？我觉得像这样的东西会起作用：

.featured_tutorial img < a

Answer 1

CSS不支持parent选择器。

您必须使用a.this_link_contanis_img{ /*override background*/ }

等类

或许你可以为img设置一个新属性。这可能会隐藏链接的背景。

.featured_tutorial img{ /*override background*/ }

编辑：好的，那在你的情况下不会起作用..

Answer 2

层叠样式表不允许“向后”访问元素。您只能访问元素的子元素，而不能访问其父元素。

Answer 3

底部有背景泄漏，因为默认情况下图像是内联级别元素，并且位于文本行的基线处，因此基线和下降线之间存在间隙，导致颜色泄漏。你可以通过两种方式摆脱它。设置css：

a img { display: block; }

或者如果您希望保持显示为内嵌

a img { vertical-align: bottom }

这应该可以解决您的问题，因为它会在内嵌模式下将图像与图像放置的文本行的下降线对齐。

希望它有所帮助，

吨。

Answer 4

如上所述，没有CSS修复，但由于你已经在使用jQuery，这是我能想到的唯一方法

http://jsfiddle.net/vrqCV/

jQuery(document).ready(function() {
    jQuery("a:not(:has(img))").addClass("bg");
 });

Answer 5

正如已经指出的那样，CSS没有一种方法可以“查找”DOM树。它基本上归结为性能考虑因素。 （这是one explanation。）

但是，如果你不厌恶使用Javascript处理这类事情的有时必要的邪恶，jQuery有一个:parent selector。