Question

我要对我的网站应用链接样式，以便外部链接旁边会显示一个图标，但是我有问题，在应用时页脚图像链接也发生了变化，如果有办法避免这种情况？

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;
}

Answer 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://

Answer 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

<小时/>

OLD

显而易见的解决方案是使用类选择器。如果无法编辑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>

外部链接的链接样式

2 个答案:

更新

OLD

段