外部链接的链接样式
Posted
技术标签:
【中文标题】外部链接的链接样式【英文标题】：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，这样它就只会附加到那个特定的元素。
【参考方案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%。以上是关于外部链接的链接样式的主要内容，如果未能解决你的问题，请参考以下文章