HTML CSS，链接定义，删除链接中的边框图像

如何解决HTML CSS，链接定义，删除链接中的边框图像

| 在我的页面中，我有两种类型的链接，文本链接和图像链接。 对于文本链接，我定义了以下CSS规则：

a:link,a:visited{
    text-align: right;
    text-decoration:none;
    color: #ccb771;
}   
a:hover,a:active{
    color: #333300;
    border-bottom: 2px solid #333300;
    padding-bottom: 0.25em;
}

对于文本链接，一切正常！但对于图像链接，当鼠标悬停在图像上时会添加下划线。我添加了以下代码来为图像链接定义新规则：

.bodyimage a:link,a:visited,a:hover,a:active{
border: none;
padding-bottom: 0px;

} 但是此规则将覆盖以前的链接，并且文本链接不会显示下划线。 我该怎么办？ 对不起，我的英语太差了！

解决方法

问题是边框已分配给（悬停）链接。为了删除存在的图像，您需要一个不存在的父选择器，即您需要说-如果此链接包含

img

，请从父

a

删除边框 通常希望使用父选择器，并且可以使用JS :) 解决方法是对选项之一进行分类（添加类别）以定位“ 4”或“ 5” 有点像这样.. CSS：

a:link,a:visited{
    text-align: right;
    text-decoration:none;
    color: #ccb771;
}

a:hover,a:active{
    color: #333300;
    padding-bottom: 0.25em;
}

a img {border: 0;}

a.txt:hover,a.txt:active {
    border-bottom: 2px solid #333300;
}

HTML：

<a class=\"txt\" href=\"#\">text link</a> - <a href=\"#\"><img src=\"http://dummyimage.com/100x100/000/fff\" alt=\"\" width=\"100\" height=\"100\"></a>

如果图片链接较少，则最好对包含图片的链接进行分类。,尝试将其放入CSS中：

img
{
    border:0;
}

并删除您的

bodyimage

班。如果这不起作用，请尝试：

img
{
    border:0 !important;
    padding:0 !important;
}

,抱歉，如果我缺少某些内容，但是使用边框底线向文本添加下划线是否有原因？如果您使用text-decoration：underline，则文字会带有下划线，而图片则不会。那不是你想要的吗？ 如果仅在将鼠标悬停在链接上时才需要此效果，则需要：

a {
  text-decoration:none;
  color: #ccb771;
}
a:hover {
  text-decoration:underline;
  color: #333300;
}
a img {
  border:none;
}

这应该为您提供所需的颜色，并在文本上加上下划线，同时使图像带有下划线。