CSS選擇與特定屬性

元素的第一個孩子讓我們說，我們有下面的代碼：CSS選擇與特定屬性

<node> 
    <element bla="1"/> 
    <element bla="2"/> 
    <element bla="3"/> 
    <element bla="3"/> 
    <element bla="3"/> 
    <element bla="4"/> 
</node>

你怎麼會去選擇具有屬性等於3的第一個孩子？我在想，也許這可以做的工作：

element[bla="3"]:first-child

...但它沒有工作

來源

2011-08-19 Pass

您是否使用CSS來設置XML標記或什麼？ – BoltClock

不，只是爲了說明問題 – Pass

下次如果您正在設計HTML樣式，請提供一個HTML示例，以防它影響到您得到的答案。我的答案涵蓋了一些案例。 – BoltClock

的:first-child僞類僅着眼於第一子節點，因此，如果第一個孩子ISN」 t element[bla="3"]，則沒有選擇。

屬性沒有類似的過濾僞類。解決這個一個簡單的方法是選擇每個人，然後排除第一後會發生什麼（這招，說明here和here）：

element[bla="3"] { 
} 

element[bla="3"] ~ element[bla="3"] { 
    /* Reverse the above rule */ 
}

這當然只適用於應用樣式;如果你想挑選出造型相比其他目的在於元素（因爲您的標記似乎是任意的XML而不是HTML），你將不得不使用別的東西像document.querySelector()：

var firstChildWithAttr = document.querySelector('element[bla="3"]');

或XPath表達式：

//element[@bla='3'][1]

來源

2011-08-19 23:30:18 BoltClock

CSS選擇與特定屬性

回答

相關問題