有没有办法在没有 JS 的情况下以不同方式设置本地和全局链接的样式？

Question

例如，我想将我在网站上的文章的 link 样式设置为 [My Article]，然后将全局 link 设置为 [[Wikipedia page]]、[[Youtube channel]]，有没有办法区分css中的这些link，从而为每种类型创建不同的样式？

Answer 1

您可以 select 根据属性及其开始方式设置样式。因此，对于 select 值为 'global' 的 href，即以 http 开头，您可以使用：

a[href^=http] {
  color: magenta;
}

因此您可以将所有链接设置为 lime 然后覆盖全局链接的设置：

a {
  color: lime;
}

a[href^=http] {
  color: magenta;
}

<a href="https://whosebug.com">Whosebug</a>
<a href="test1.html">Test1</a>

Answer 2

是

假设您有一个域，您可以select 只是那些具有属性 select或类似

a[href="https://address"] {
  /* your styles here */
}

更进一步，您可以使用伪元素将 link 文本包装成您想要的任何内容

a[href="https://address"]:before {
  content:"[";
}

   a[href="https://address"]:after {
      content:"]";
    }

您可以使用相同的技术在所有 link 上使用“[[”和“]]”定义换行。

a[href="https://whosebug.com"]:before {
  content: "[";
}

a[href="https://whosebug.com"]:after {
  content: "]";
}

a {
  color: black;
  text-decoration: none;
}

a:before {
  content: "[[";
}

a:after {
  content: "]]";
}

<a href="https://whosebug.com">Stack Overflow</a>

<a href="https://google.com">Google</a>

有没有办法在没有 JS 的情况下以不同方式设置本地和全局链接的样式？

Is there a way to style local and global links differently without JS?

html

css

hyperlink

是