我可以在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 =「...」]屬性選擇器嗎？

回答

相關問題