Question

通过下面的示例，我需要向文本锚点添加填充和背景颜色属性。然后，我需要从包含图像的锚点排除填充和背景颜色。

<p>
  <a href="#">this is a text link that needs to be styled</a>
  <a href="#"><img src="image/name.jpg" alt="this needs to be excluded from styling" /></a>
</p>

如果我的文字链接上有红色背景和填充，我不希望在链接的图像上显示相同的红色背景和填充。图像将始终位于自己的锚点中，而不是与同一锚点中的文本混合。

问题是我无法向img标签添加类或ID - 我没有对该数据进行编辑控制。

那么如何将CSS属性添加到所有锚点，同时排除包含图像的锚点？

Answer 1

使用JQuery：

$(function() {
    $('a:not(:has(img))').css('background','red');
});

Answer 2

目前，您无法选择匹配的子选择器的父级。你必须使用javascript来完成这个。

话虽如此，如果您的网页背景是固定的，您可以在img标记上使用负边距和背景来覆盖a背景... Here's the example.我还没有测试过所有的浏览器，但它似乎适用于Safari，Firefox和MSIE8。

a {
   display: inline;
   padding:10px;
   background:red;
}

a img {
   border: none;
   vertical-align: bottom;
   margin:-10px;
   padding: 0px;
   background:white;
}

设置除包含图像的锚点以外的所有锚点，而不向图像标记添加类或ID？

2 个答案: