logo标签列表

外部链接的链接样式

csshyperlinkhref
4

我打算在我的网站上应用链接样式，使外部链接旁边有一个图标，但是当应用时，页脚图片链接也发生了变化，有没有办法避免这种情况的发生？

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;
}
你能包含底部图片链接的标记吗？ - jkris
只需在a标签中使用一些类或ID，这样它就只会附加到该特定元素上。 - aavrug
2个回答
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://

0

更新

在找到并评估了该网站之后，我得出了一个可靠的解决方案：

  • 将此样式块放置在<head></head>的末尾...
  • ...或将其放置在样式表中：styles.css。
  • 搜索“navigation”，并将其放置在最后一个以#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; }

OR

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>

感谢您提供的信息，代码似乎已经完全删除了页脚原始图片。 - nsic
如果您有不同的页脚锚点图像，您只需要按原样使用该图像，参见更新。 - zer00ne
谢谢，页脚有自己的样式，带有与组织链接相关的图标列表，有没有办法解决这个问题？ - nsic
请查看更新，Plunker是您网站导航栏和页脚的粗略复制品，因此在样式上存在一些差异。如果您使用我提供的规则集并正确放置，成功率达到99%。 - zer00ne
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接