CSS多个:not与混合选择器类型

Question

我希望为一个网站的外部链接添加特殊图标，但不只是针对特定的类别或id。

a[href^="http://"]:not([href*="sitename.com"]):not(classname or id):before,
a[href^="https://"]:not([href*="sitename.com"]):not(classname or id):before
{
   content: '\f08e';
   font-family: "fontawesome";
   color: #019fe0;
   padding-right: 4px;
}

但是它会标记所有的元素，即使它们具有类名。

- Regnalf

Answer 1

如果你想为一个网站标记外部链接，但不想为sitename.com（例如）使用一个名为someId的特殊按钮（例如），这是实现的方法。

最初的回答：

如果您想在网站上标记外部链接，但不想为sitename.com（例如）使用具有名为someId的id的特殊按钮，则可以按照以下方式进行操作。

a[href^="http://"]:not([href*="sitename.com"]):not(#someId),
a[href^="https://"]:not([href*="sitename.com"]):not(#someId) {
    /* CSS properties */
}

如果你想将外部链接标记为 sitename.come（例如），并带有一个名为 idName 的特殊按钮，那么可以按照以下方式进行操作。

a[href^="http://"][href*="sitename.com"]#idName,
a[href^="https://"][href*="sitename.com"]#idName {
    /* CSS properties */
}

我为了演示这个答案已经制作了一个Fiddle：Fiddle

---

如果你指的是classname OR id作为某种选择器：

a[href^="http://"]:not([href*="sitename.com"]):not(#someId):not(.some-class),
a[href^="https://"]:not([href*="sitename.com"]):not(#someId):not(.some-class) {
    /* CSS properties */
}

- Derk Jan Speelman

---

谢谢你提供的好代码，但我认为我的问题在于代码无法工作，因为ID或类位于父容器中。所以我想，没有办法解决，是吗？ :-( - Regnalf

如果您的元素在该容器内，您可以使用 #id a[href...]，如果要样式化 <a> 内的元素，则可以使用 a[href^="http://"][href*="sitename.com"] #idName（注意空格）。总有办法！让我知道这是否有帮助，或者更新您的问题以获取更详细的信息！ - Derk Jan Speelman

@Regnalf 我也编辑了我的回答。也许这就是你想要的？ - Derk Jan Speelman

谢谢你的提示，但这正是我现在用的解决方法。在我想要的容器中捕获所有的“a”元素。如果我想要排除它，在那里我必须为该特定元素设置额外的CSS行。再次感谢，那个漂亮的小例子很不错。 - Regnalf

很高兴能帮到你！祝你好运。 - Derk Jan Speelman