CSS Multiple：不适用于混合选择器类型

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;
}

但它标记了所有标记，甚至包括那些具有类名称的标记。

Answer 1

如果您想标记站点的外部链接，例如但不标记 sitename.com ，请使用一个特殊按钮，该按钮不例如，有一个名为 someId 的ID，这就是这样做的方式

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

如果您要使用具有ID名称 idName <的特殊按钮来标记指向 sitename.come 的外部链接（例如） / em> （例如），这就是做到这一点的方式

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

我做了一个小提琴来演示这个答案：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 */
}