通過屬性選擇一個CSS元素[複數！]

我一直在使用CSS3選擇器來根據它們的屬性選擇特定的元素，雖然今天，我已經將自己編程到了一個角落，在那裏我需要選擇一個特定的元素基於兩個不同屬性的存在，而不僅僅是1.通過屬性選擇一個CSS元素[複數！]

例如我需要選擇第一個div。

<div data-foo="bar" data-bar="baz"> 
<div data-foo="bar" data-bar="lorem"> 
<div data-foo="ipsum" data-bar="baz">

只是爲了好玩，我試過div[data-foo="bar", data-bar="baz"]，但並不奇怪，這並沒有奏效。

有沒有什麼辦法讓我得到這個特定的元素？

現在，我能想到的唯一解決方案是選擇具有正確data-foo屬性的所有元素，然後遍歷結果以找到具有正確data-bar屬性的元素。

來源

2011-11-30 Julian H. Lam

你被關閉，因此：

div[data-foo="bar"][data-bar="baz"]

Live example

從CSS 2.1 specification：

這裏，選擇匹配所有SPAN元素，其「你好」屬性具有完全相同的價值「克利夫蘭「，其」再見「屬性恰恰具有」哥倫布「的價值：

span[hello="Cleveland"][goodbye="Columbus"] { color: blue; }

（有一個新的CSS3 Selectors spec爲好，這是越來越多的支持，但我們並不需要爲這個CSS3功能。）

來源

2011-11-30 17:21:08

哦，哇。感謝您的鏈接！我不應該仔細閱讀這個規範。 **編輯**：嗯，它似乎沒有從CSS3規範。這有點煩人，因爲其餘的功能都有記錄... –

@ JulianH.Lam：不用擔心，很高興幫助。它也在CSS3規範中：http://www.w3.org/TR/css3-selectors/#attribute-selectors這是同一個例子，但是段落開頭是一個新的句子*說*它們被支持而不僅僅是演示它：*「可以使用多個屬性選擇器來表示元素的幾個屬性或同一屬性上的多個條件。」* –

Hm。我需要檢查我的眼睛... –

通過屬性選擇一個CSS元素[複數！]

回答

相關問題