Question

我想让我网站上的所有文字链接都有一个底边框。我用：

a
{
    border-bottom: 1px dotted #333;
}

...但它也为图像链接添加了边框，我不希望这样。

如何才使其适用于文字链接？

Answer 1

a { border-bottom:1px dotted #333; }
a img { border:0; }

~~只需覆盖继承的规则，即本机css方式。~~

编辑：哇，我真的不注意了。你能把一个类扔到包含图像的锚点吗？

a.contains-image { border:0; }

如果不依赖CSS3的not选择器，这将是唯一的非脚本解决方案。

Answer 2

添加：

img {
    border: none;
}

这将摆脱图像的边界。

Answer 3

在链接上添加边框并删除它（如果它包含一些img）在CSS中是不可能的，有或没有：not（）
您无法根据其后代选择元素（CSS不是XPath），也不能影响父级样式。

我会使用jQuery选择器（确切地说是Sizzle）并根据图像的存在添加一个类：

<style type="text/css">
  .underline { border: 4px dotted #333; }
  a img { border:0; /* remove the default blue border from images within links */}
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    $('a:not(:has(img))').addClass('underline');
  });

如果您不仅有100％的文字和＆gt; img：only-child链接，而且还有文字+ img混合在链接中，您还可以定位img:only-child或在链接中包装文字（{{1}除外）如果您在页面中有这些边缘情况，请在img元素中以某种方式设置混合链接的样式。

选择所有<a> tags except the </a> <a> tags that contain an <img/> tag in CSS</a>

3 个答案: