是否可以设置“外部"样式?HTML 链接与“相对"不同单独使用 CSS 的链接? [英] Is it possible to style "external" HTML links differently to "relative" links using CSS alone?

问题描述

网站通常会采用与离开网站的用户不同的链接样式，让用户留在网站中.例如:

Often sites will style links that keep the user in a site differently to those that leave the site. For example:

在上面的网址"链接中，网址"链接将用户定向到网址上的维基百科页面，而stackoverflow.com"链接将用户定向到我们熟悉和喜爱的网站.

In the above the "web address" link directs the user to the Wikipedia page on Web Addresses, while the "stackoverflow.com" link directs the user to the site we know and love.

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

However, the wikipedia stylesheets include a .external class to add the external link icon.

我接触过一些 CSS 属性选择器a[href='??']，但不能完全正确，即使只使用相对内部链接也是如此.

I've dabbled with some of the CSS attribute selectors a[href='??'] but can't quite get it right, even when using just relative internal links.

如果我们假设所有内部链接都是相对的，那么可以单独使用纯 CSS 来设置内部和外部链接的样式吗?

另外，如果我们知道当前站点的地址，还能做吗?

Additionally, if we know the address of the current site, can it still be done?

推荐答案

除了 showdev 的回答，我相信以下是适用于当今浏览器的最准确的选择器:

In addition to showdev's answer, I believe the following is the most accurate selector that works on today's browsers:

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

这会处理不同的协议(想想 http:// 与 https://).

This takes care of different protocols (think http:// vs https://).

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

Note that, for this to work, you must use relative URLs for all of your local links. So http://example.com/stuff will be treated as external even if your website is in the example.com domain.

这篇关于是否可以设置“外部"样式?HTML 链接与“相对"不同单独使用 CSS 的链接?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！