Question

我正在使用CSS在内部锚标签上附加图标。 e.g。

<a href="#section2">Jump to section two</a>

但我不想将图标附加到仅href的{{1}}（JavaScript和页面顶部链接）。所以像这样的链接就不会有图标了。

"#"

我正在尝试使用CSS而不是JavaScript。

这可以接受吗？

<a href="#">Back to top</a>

Answer 1

允许多个attribute selectors ，但没有[attr!=value]属性选择器。

您可以使用:not()伪类从选择器中排除[href="#"]：

a[href^="#"]:not([href="#"]):after {
    content: ' \f14c';
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
}

值得注意的是:not()伪类适用于 IE9+

<强> WORKING DEMO

或者对于IE8 （声明DOCTYPE时），您还可以覆盖[href="#"]选择器的应用样式，如下所示：

a[href^="#"]:after {
    content: ' \f14c';
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
}

a[href="#"]:after {
    content: none;
}

<强> UPDATED DEMO

我可以在CSS中使用多个[element =＆＃34; ...＆＃34;]属性选择器吗？

1 个答案: