仅使用CSS可以将“外部”HTML链接与“相对”链接样式不同吗？

Question

通常，网站会以不同的方式为用户保留在站点内的链接和离开站点的链接进行样式设计。例如：

在上面的示例中，“Web地址”链接将用户引导到维基百科上的Web地址页面，而“stackoverflow.com”链接则将用户引导到我们所知道和喜爱的网站。

然而，维基百科样式表包括一个“.external”类来添加外部链接图标。

我尝试过一些CSS属性选择器a[href='??']，但即使只使用相对内部链接，也无法完全正确地实现它。

如果我们假设所有内部链接都是相对的，那么是否可以仅使用纯CSS来设计内部和外部链接呢？

此外，如果我们知道当前站点的地址，是否仍然可以这样做？

- user764357

---

值得注意的是，Laravel 应用程序和其他一些应用程序始终使用完整的 URL，即使是内部链接也是如此。 - mpen

Answer 1

除了showdev的答案之外，我认为以下是在今天的浏览器中最准确的选择器：

a[href*='//']{
    /* ... */
}

这可以解决不同的协议问题（如http://与https://）。

请注意，为了使其正常工作，您必须对所有本地链接使用相对URL。因此，即使您的网站位于example.com域中，http://example.com/stuff也将被视为外部链接。

- JCOC611

---

是的，它可以处理http和https（以及其他协议）。好主意。 - showdev

href^=http 将同时处理 http 和 https（但不包括其他协议）。 - guido

@guido：那么协议相对链接（即//google.com）用于自动处理https的情况呢？ - JCOC611

@JCOC611 没错，但很少用于 a href 链接；更常用于加载资源。 - guido

不幸的是，这也将匹配任何路径包含空路径段的URL，例如/this/is/a/valid//path，请参见Wikipedia。 - mdcq

Answer 2

你可以使用CSS属性选择器根据href的值有条件地应用样式：

/* Links that start with "http" */
a[href^=http] { background-color:red; }

/* Links that don't start with "http" */
a:not([href^=http]) { background-color:lightgreen; }

/* Links that contain a specific domain name */
a[href*=example\.com] { background-color:lightblue; }

<a href="http://google.com/">external</a>
<a href="example.html">internal</a>
<a href="http://example.com">example.com</a>

编辑：

如JCOC611的答案所述，忽略掉"http"部分可能更加灵活，因为其他方案（ftp，git等）将不会匹配。

下面，我测试//的存在而不是http。这将匹配其他方案和网络路径引用。（当然，它也会错误地匹配具有错误双斜杠的本地链接。）

/* Links that contain "//" */
a[href*='//'] { background-color:red; }

<a href="//example.com">//example.com</a>
<a href="ftp://example.com">ftp://example.com</a>
<a href="example//fun.html">example//fun.html OOPS!</a>
<a href="example/fun.html">example//fun.html YAY!</a>

- showdev

Answer 3

目前还没有相关功能，但是在CSS选择器第四级中，有一个（可能即将推出的）:local-link 伪类，例如：

a:local-link {
    color: red;
}

例如，假设这个页面托管在http://example.com上：

<a href="/another/page">Another page</a>
<a href="http://example.com/yet/another/page">Yet another page</a>
<a href="http://www.google.com/">Google</a>

上述CSS代码将（至少从我的理解来看）会将除了指向Google的链接以外的所有链接都设置为红色。

尽管我试过的浏览器都还没有实现这个功能。

话虽如此，对于具有绝对URL的元素，属性开头选择器可以帮助匹配（虽然它只能作用于href属性，而不是JavaScript的href属性），所以……

a[href^=http://example.com] {
    color: green;
}

这个选择器只会作用于文本为“Yet another page”的元素，因为之前的元素有一个相对根路径 URL，尽管是“local”，但它没有一个以'http://example.com'开头的 href 属性。

参考资料:

• :local-link.

- David Thomas

---

作为example.com上的本地链接，使用a:local-link样式会将前两个链接标记为红色，而不会对指向google的链接进行样式化。 - Stephen P

抱歉，我可能在某个时刻忘记了自己正在输入的句子... >.<（谢谢！已编辑和更正！） :) - David Thomas

Answer 4

对于内部链接，请使用a[href='??']规则，对于外部链接，请使用没有这个规则的链接：

a {
    background: green;
    color: white;
}
a[href*='http://www.my-website.com'] {
    background: blue;
    color: white;
}

请确保按照这个顺序放置。使用带有附加的*的[href*=""]将确保获取包含给定字符串的任何href。

在此处查看：http://jsfiddle.net/ur3rcymc/1/

- Jon

---

使用a[href*='my-website.com']可能已足以针对特定的内部（绝对）链接，因为有时URL中会剥离www，或者服务器连接可能是安全的（使用https://而不是http://）。 - Terry