主页 / 问题 / 1175165
Accepted
Linne
Asked:2020-09-07 17:08:18 +0800 CST2020-09-07 17:08:18 +0800 CST

CSS 链接样式

  • 772

同志们！

您需要对外部链接进行样式设置，以便在它们的末尾添加一个图标。一切似乎都在工作。但是，我需要不要将图标添加到一个第三方资源中：

    a[href^="http://"]:not([href*="mysite.org"]):after,
    a[href^="https://"]:not([href*="mysite.org"]):after,
    a[href^="//"]:not([href*="mysite.org"]):after,
    a[href^="http://"]:not([href*="creativecommons.org"]):after,
    a[href^="https://"]:not([href*="creativecommons.org"]):after,
    a[href^="//"]:not([href*="creativecommons.org"]):after {
        content: url(../../img/elink.svg);
    }

一切似乎都是合乎逻辑的。但是，仍会添加图标。我究竟做错了什么？

真的没有人遇到过类似的情况吗？

css3

1 个回答

  1. Best Answer

    mysite.org适合选择器:not([href*="creativecommons.org"])，反之亦然，creativecommons.org适合:not([href*="mysite.org"])它们相互配合。为防止这种情况发生，您需要同时排除两者。

    a { display: block; }

a[href^="http://"]:not([href*="mysite.org"]):not([href*="creativecommons.org"])::after,
a[href^="https://"]:not([href*="mysite.org"]):not([href*="creativecommons.org"])::after,
a[href^="//"]:not([href*="mysite.org"]):not([href*="creativecommons.org"])::after {
  content: url('https://gyazo.com/152639e8b917f68ca6b16d3ccb5f249d.png');
}
    <a href="http://mysite.org">mysite.org</a>

<a href="http://creativecommons.org">...org</a>
<a href="https://creativecommons.org">...org</a>
<a href="//creativecommons.org">...org</a>

<a href="https://ru.stackoverflow.com/">test</a>
<a href="https://stackoverflow.com/">test</a>

    将它们分开会更明智：

    a { display: block; }

a[href^="http://"]::after,
a[href^="https://"]::after,
a[href^="//"]::after {
  content: url('https://gyazo.com/152639e8b917f68ca6b16d3ccb5f249d.png');
}

a[href*="mysite.org"]::after,
a[href*="creativecommons.org"]::after {
  content: "";
}
    <a href="http://mysite.org">mysite.org</a>

<a href="http://creativecommons.org">...org</a>
<a href="https://creativecommons.org">...org</a>
<a href="//creativecommons.org">...org</a>

<a href="https://ru.stackoverflow.com/">test</a>
<a href="https://stackoverflow.com/">test</a>

    • 2

相关问题