结合 CSS3 非选择器答案

【问题标题】：Combining CSS3 Not Selectors结合 CSS3 非选择器
【发布时间】：2013-05-28 07:24:00
【问题描述】：

我正在尝试选择所有链接，除了内部链接和 mailto 链接和锚链接 (#) 所以我想组合选择器，这样它们就可以排除 X、Y 和 Z。但是我不知道如何加入它们。

a:not([href*="myurl"]) { }

这个 CSS 会找到所有不包含 'myurl' 的链接，然后它会找到 mailto: 和锚 (#) 链接，我想从选择器中排除它。

我必须使用 not 选择器来查找我网站之外的所有 URL，因为据我所知，如果不使用 not 就无法说出“我自己之外的所有网站”。有没有办法让我喜欢

a:not([href*="myurl OR # OR mailto"]) { }

如果重要的话，完整的代码也会使用 :hover 和 :after ：

a:not([href*="myurl"]):hover:after { }

这需要完全在 CSS 而不是 jquery/javascript 中完成。而且我无法向 url 添加类。

有可能吗？（跨浏览器没那么重要，Chrome + Firefox 就足够了）

我目前的工作是使用not([href*="http:// "]) { } 定位其他链接，但这并不可取，因为这意味着再次覆盖更改，这并不总是有效，因为一个可能是color: red，另一个可能是color: blue 和我不能让它们回到原来的颜色（还有其他原因）

【问题讨论】：

【解决方案1】：

您可以通过添加更多 :not() 选择器来排除它们：

a:not([href*="myurl"]):not([href*="#"]):not([href*="mailto"]) { }

对于:hover:after 状态，只需像这样附加它：

a:not([href*="myurl"]):not([href*="#"]):not([href*="mailto"]):hover:after { }

另外，由于这是 CSS3，我建议您使用双冒号将 :after 表示为 ::after，以明确您在一系列伪类之后链接 pseudo-element ，但这不是绝对必需的，无论您使用哪种浏览器都不会产生影响：

a:not([href*="myurl"]):not([href*="#"]):not([href*="mailto"]):hover::after { }

【讨论】：