结合CSS3非选择器

时间:2013-05-28 07:24:00

标签: css css3 css-selectors

我正在尝试选择除内部和链接和锚链接(#)之外的所有链接 所以我想组合选择器,以便排除X,Y和Z.但是我无法弄清楚如何加入它们。

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

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

我必须使用not选择器来查找我网站之外的所有网址,因为我无法在不使用not的情况下说出“我自己以外的所有网站”。 有没有办法让它像

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

完整代码使用:hover和:after,如果重要的话:

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

这需要在CSS中完全完成而不是jquery / javascript。我不能在网址上添加课程。

有可能吗? (跨浏览器并不重要。Chrome + Firefox就足够了)

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

1 个答案:

答案 0 :(得分:13)

您只需添加更多: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 { }