外部链接的链接样式答案

【问题标题】：link style for external link外部链接的链接样式
【发布时间】：2017-04-05 15:28:19
【问题描述】：

我将在我的网站上应用链接样式，因此外部链接旁边会有一个图标，但是我遇到的问题是页脚图片链接在应用时也发生了变化，如果有办法避免这种情况吗？

CSS

a[href^="http://"] { 
background: url( https://www.clearinghouseforsport.gov.au/__data/assets/image/0009/643176/icon_external.gif ) center right no-repeat;
padding-right: 16px;
}

【问题讨论】：

能否将页脚图片链接的标记包含在内？
只需使用带有a标签的一些类或ID，这样它就只会附加到那个特定的元素。

标签： css hyperlink href

【解决方案1】：

我认为不可能根据子元素将选择器分配给父级，请在 SO Apply CSS styles to an element depending on its child elements 中查看此答案。你想申请所有<a>link</a> 但排除<a><img src='' /></a> 这是不可能的

但您可以尝试这样做：

a[href^="http://"] {
  /*do your stuff*/
}

a[href^="http://"] img {
 background: none; /*remove background*/
}

应该可以。顺便说一句，您的选择器中缺少https://

【讨论】：

【解决方案2】：

更新

在找到并评估网站本身后，我有一个可靠的解决方案：

将此样式块放在<head></head>的末尾...
...或将其放在样式表中：styles.css。
搜索“导航”并将其放在以#navigation... 开头的最后一个规则集之后
不要在样式表中包含标签。

标签仅适用于 HTML 页面：

<style>
  #navigation a::after {
     content: url(https://www.clearinghouseforsport.gov.au/__data/assets/image/0009/643176/icon_external.gif);
     position: relative;
     top: 5px;
     left: 3px;
  }
</style>

注意：替代选择器是：a.navmenuitem::after

查看PLUNKER

旧

显而易见的解决方案是使用类选择器。如果无法编辑 HTML，请尝试使用类型选择器。在您的情况下，如果您想排除页脚中的锚点，请尝试以下操作：

footer a { background:none !important; }

或

footer a[href^="http://"]  { background: url(https://cdn1.iconfinder.com/data/icons/web-page-and-iternet/90/Web_page_and_internet_icons-14-128.png) no-repeat 20px 20px;

片段

a[href^="http://"] {
  background: url(https://www.clearinghouseforsport.gov.au/__data/assets/image/0009/643176/icon_external.gif ) center right no-repeat;
  padding-right: 16px;
  margin: 10px;
}
footer a[href^="http://"] {
  background: url(https://yourescape.ldara.com/_resources/images/content/icon_link.png) center right no-repeat;
  padding-right: 20px;
}

<header>
  <nav>
    <a href="http://example.com/">NAV</a>
    <a href="http://example.com/">NAV</a>
    <a href="http://example.com/">NAV</a>
    <a href="http://example.com/">NAV</a>
  </nav>
</header>
<section>
  <aside>
    <a href="http://example.com/">ASIDE</a>
    <a href="http://example.com/">ASIDE</a>
  </aside>
</section>
<footer>
  <a href="http://example.com/">FOOTER</a>
  <a href="http://example.com/">FOOTER</a>
</footer>

【讨论】：

感谢您的信息，代码如何将页脚的原始 img 一起删除。
如果页脚锚点有不同的图像，您需要做的就是按原样使用图像，请参阅更新。
谢谢，页脚有自己的样式，带有与组织链接关联的图标 img 列表，有没有办法解决这个问题？
查看更新，Plunker 是您网站导航栏和页脚的粗略复制，因此在样式上有一些差异。如果您使用我提供的规则集并正确放置，则成功的可能性为 99%。