从图片中删除下划线 link

Question

我有一个 page，其中有一个大图像也有一个 link 元素，我想从图像 link 中删除下划线。我在 Chrome 中工作，它在图像 link 下显示突出显示并声称 css 是由 user agent stylesheet 引入的，据我所知是 Chrome 的默认 css。 user agent stylesheet 为我的页面带来了以下样式：

a:-webkit-any-link {
    color: -webkit-link;
    text-decoration: underline;
    cursor: auto;
}

如何删除这张图片的下划线 link？我尝试将我的 link 和图像的 ID 设置为 img-link，然后使用以下 css 定位该 ID，但没有成功：

<a id="img-link" href="/images/post_images/mapping_early_english_books/provincial_printing.png" data-lightbox="provincial_printing" data-title="My caption">
  <img id="img-link" src="/images/post_images/mapping_early_english_books/provincial_printing.png" alt="Provincial Printing" style="width:100%" /></a></p>

#img-link {
    text-decoration: none;
}

如果其他人可以提供有关删除此下划线的任何帮助，我们将不胜感激！

Answer 1

只需将边框属性设置为零：

#img-link {
   text-decoration: none;
   border: 0 !important;
}

Answer 2

#img-link, #img-link img{
   text-decoration: none !important;
   border:0px !important;
   outline:none;
   border-width: 0px;
   outline-width:0px;
   border-bottom: none;
}

Answer 3

我不太确定，但你能试试这个吗：

#img-link {
  text-decoration: none !important;
}

希望能解决

Answer 4

不要为多个元素赋予相同的 ID 值。

如果您希望 CSS 也以 ID 为 img-link 的元素内的 img 元素为目标，请使用以下 CSS.

#img-link, #img-link img{
    text-decoration:none;
    border-width: 0px;
}

Answer 5

问题似乎来自您在 css .content a 中添加的下划线，请尝试添加：

    border-bottom: none;

到你的img-link css

从图片中删除下划线 link

Removing underlining from image link

html

css

image

jekyll