我可以在CSS中使用多个[element =“...”]属性选择器吗？

我正在使用CSS将图标附加到内部锚标签上。例如我可以在CSS中使用多个[element =“...”]属性选择器吗？

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

但我不想图标追加到href S中的唯一"#"（JavaScript和顶部的页面链接）。所以像这样的链接在它之后没有图标。

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

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

这是可以接受的吗？

a[href^="#"][href!="#"]:after { 
    /* ... */ 
}

来源

2014-03-12 Coomie

是的，允许多个属性选择器，我不认为它们是不同的属性。 – Barmar

是的，它是可以接受的 – Koti

是的，你可以轻松地添加更多的条件给选择器，但不要过分。我建议尽可能简化选择器。这将使您可以稍后更轻松地修改它。如果'＃section'是一个标准的前缀给你定位标签，你可以将选择器设置为'a [href^=“＃section”]' – Gil

多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。

来源

2014-03-12 06:46:59

我可以在CSS中使用多个[element =“...”]属性选择器吗？

回答

相关问题