如何匹配包含另一个元素的元素？

Question

在CSS中，我希望所有链接都有一个border-bottom：1px solid属性。但是，如果我有一个链接图像，它也会获得边框。当且仅当它包含img元素时，如何更改a属性？

Answer 1

尝试使用Descendant Selectors：

a img {
    border-bottom: none;
}

如果它似乎不起作用，首先确保选择器是正确的（即引用正确的元素），通过放入一些疯狂的语句，将明确哪些元素受到影响选择器：

a img {
    color: red;
    background-color: red;
    border-bottom: none;
}

当选择器正常工作时，您可以专注于不起作用的语句（不要忘记删除疯狂的语句！）。它可能在某处被覆盖，因此请尝试将!important添加到语句的末尾：

border-bottom: none !important;

如果这样做，那么你需要仔细检查你的CSS代码并重新安排你的样式规则，这样你就不会覆盖这个规则。

如果仍然无效，请确保使用正确的值覆盖正确的属性。

Answer 2

a { text-decoration: none }

您看到链接的文本修饰下划线默认为。但是，如果a标记包含img标记，则无法更改其格式。 CSS就是这样不起作用的。您可以使用图像向任何a添加一个类，并根据该类指定一个样式。

CSS

a.image { text-decoration: none }

HTML

<a href="foo" class="image"><img src="foo.jpg"/></a>

Answer 3

...

<style>
  a{border-bottom: 1px solid;}
  a img{border:none;}
</style>

Answer 4

为什么不将<img>包裹在<span>中，然后使用CSS

a {border-bottom: 1px solid #33ccff;}
span a {border: none;}

Answer 5

特别是因为标准解决方案不适合您，所以某些代码会非常有用。

在黑暗中拍摄，我的建议是指定边框宽度：

a { border-bottom: 1px solid blue; }
a img { border-width: 0 0 0 !important; }

或

a img { border-bottom-width:0; }

如果没有其中任何一个，我会开始查看任何其他可能重叠的样式（不一定是继承，只影响悬停时的可视空间），如填充和边距以及包含元素的背景颜色。