试图摆脱我图片下方烦人的蓝色小链接[重复]答案

【问题标题】：Trying to get rid of annoying little blue links below my images [duplicate]试图摆脱我图片下方烦人的蓝色小链接[重复]
【发布时间】：2018-04-19 11:59:00
【问题描述】：

Photos of the icons with the blue line

我正在尝试在我的网站上删除这些（图标下方的蓝线）（我正在使用 HTML 和 CSS 进行编码）我尝试了很多不同的东西，例如 text-decoration: none; 边框：无；（用于图像）似乎找不到解决方法

这是我的 HTML 的样子：

.socialmediawidgets{
     text-align: left;
}

<div>
    <div class="socialmediawidgets">
    <a href="[full link to your Twitter]">
    <img title="Twitter" alt="Twitter"  src="https://socialmediawidgets.files.wordpress.com/2014/03/01_twitter.png" width="35" height="35" />
    </a>
    <a href="[full link to your Pinterest]">
    <img title="Pinterest" alt="Pinterest" src="https://socialmediawidgets.files.wordpress.com/2014/03/13_pinterest.png" width="35" height="35" />
     </a>
     <a href="[full link to your Facebook page]">
     <img title="Facebook" alt="Facebook" src="https://socialmediawidgets.files.wordpress.com/2014/03/02_facebook.png" width="35" height="35" />
     </a>
     <a href="[full link to your LinkedIn]">
     <img title="LinkedIn" alt="LinkedIn" src="https://socialmediawidgets.files.wordpress.com/2014/03/07_linkedin.png" width="35" height="35" />
     </a>
     <a href="[full link to your Instagram]">
     <img title="Instagram" alt="RSS" src="https://socialmediawidgets.files.wordpress.com/2014/03/10_instagram.png" width="35" height="35" />
     </a>
     </div>
</div>

【问题讨论】：

全部尝试，但不适用于a，例如：.socialmediawidgets a {text-decoration:none;} 等等。那条“蓝线”不是图像的一部分，而是a（链接）。

标签： html css

【解决方案1】：

您应该在 CSS 上添加 text-decoration:none。检查the Docs

注意我已经创建了一个CSS selector“.socialmediawidgets a”

这样，受影响的链接只有.socialmediawidgetsdiv下的链接

.socialmediawidgets{
     text-align: left;
}

   .socialmediawidgets a {
    text-decoration:none;
  }

<div>
    <div class="socialmediawidgets">
    <a href="[full link to your Twitter]">
    <img title="Twitter" alt="Twitter"  src="https://socialmediawidgets.files.wordpress.com/2014/03/01_twitter.png" width="35" height="35" />
    </a>
    <a href="[full link to your Pinterest]">
    <img title="Pinterest" alt="Pinterest" src="https://socialmediawidgets.files.wordpress.com/2014/03/13_pinterest.png" width="35" height="35" />
     </a>
     <a href="[full link to your Facebook page]">
     <img title="Facebook" alt="Facebook" src="https://socialmediawidgets.files.wordpress.com/2014/03/02_facebook.png" width="35" height="35" />
     </a>
     <a href="[full link to your LinkedIn]">
     <img title="LinkedIn" alt="LinkedIn" src="https://socialmediawidgets.files.wordpress.com/2014/03/07_linkedin.png" width="35" height="35" />
     </a>
     <a href="[full link to your Instagram]">
     <img title="Instagram" alt="RSS" src="https://socialmediawidgets.files.wordpress.com/2014/03/10_instagram.png" width="35" height="35" />
     </a>
     </div>
</div>`

【讨论】：

【解决方案2】：

将范围与代码隔离，您可以将 text-decoration: none 添加到 .a。如果您正在扩展代码并希望将下划线的删除与您现在拥有的区域隔离开来，您应该使用：

.socialmediawidgets a {
text-deoration: none;
 }

请参阅附加的 sn-p，其中显示了您的代码和 CSS 的更改：

.socialmediawidgets{
   text-align: left;
 }
 
 a {
 text-decoration: none;
 }

<div>
    <div class="socialmediawidgets">
 <a href="[full link to your Twitter]">
 <img title="Twitter" alt="Twitter" src="https://socialmediawidgets.files.wordpress.com/2014/03/01_twitter.png" width="35" height="35" />
 </a>
 
 <a href="[full link to your Pinterest]">
 <img title="Pinterest" alt="Pinterest" src="https://socialmediawidgets.files.wordpress.com/2014/03/13_pinterest.png" width="35" height="35" />
 </a>
 
 <a href="[full link to your Facebook page]">
 <img title="Facebook" alt="Facebook" src="https://socialmediawidgets.files.wordpress.com/2014/03/02_facebook.png" width="35" height="35" />
 </a>
 
 <a href="[full link to your LinkedIn]">
 <img title="LinkedIn" alt="LinkedIn" src="https://socialmediawidgets.files.wordpress.com/2014/03/07_linkedin.png" width="35" height="35" />
 </a>
 
 <a href="[full link to your Instagram]">
 <img title="Instagram" alt="RSS" src="https://socialmediawidgets.files.wordpress.com/2014/03/10_instagram.png" 

width="35" height="35" />
 </a>
 
</div>
</div>

【讨论】：