带有 not(rule AND rule ...) 的 css 选择器

Question

我想创建一个只匹配外部链接的 CSS 选择器。问题是它似乎不适用于 :not() 中的多个规则。我不能使用多个 not (example: ":not():not()") because that becomes || instead of &&)。

内部链接

<a href="#!/something">...</a>

文档链接

<a href="/doc/.../binary/...">...</a>

外部链接

<a href="...whatever...">...</a>

与其他类型的链接不匹配的外部链接的 CSS 选择器。

a:not([href^="#!/"]):not([href="#"]):not([href^="/doc/"][href*="/binary/"]) {}

解释

a-tags NOT startswith hashbang || not hash || not (startswith /doc/ && contains /binary/)

在not()中似乎不可能有多个规则。这可以用其他方式解决吗？

HTML 来自 CMS，几乎没有属性。只允许使用“href”和“title”。如果我不必使用 js 循环遍历 HTML 并添加类或 rel 的解决方案，那就太好了。

Answer 1

你为什么不这样做

a[href*="//"]:not([href*="yoursite.com"]),
a[href^="#"],
a[href^="/doc/"],
a[href*="/binary/"]{    
  color: red;
}
a{
 color: green;
}

<a href="#!/something">HASH</a>

<a href="/doc/.../binary/...">Binary</a>

<a href="http://yoursite.com">Yoursite</a>