基於同一類型的前一個元素選擇元素

例如，給出下面的HTML，選擇第三個span元素：

<div> 
    <span class="red"></span> 
    <span class="red"></span> 
    <p> 
    <span id="select me"></span> 
    </p> 
    <span id="don't select me"></span> 
</div>

我想跨度元素具有相同的屬性作爲一跨元素，因爲它具有類，「紅」。

另一種說法是：選擇一個類爲「red」的元素，以及相同類型的下一個元素，而不考慮類。

我正在經歷一段艱難的時光。比沒有更好的辦法是選擇同一類型的下一個兄弟，而不是任何後續的元素。例如，span.red〜span可能會好，如果它不意味着「span元素與任何以前的跨度兄弟與類紅色。」

感謝您的任何幫助。

這裏有更多的例子：

<div> 
    <span class="red"></span> 
    <span id="select me"></span> 
    <p> 
    <span class="red"></span> 
    </p> 
    <span id="select me"></span> 
</div>

在上面的例子中，選擇所述第二跨接元件，因爲第一跨度具有類，「紅色」。

選擇最後一個跨度元素是因爲第三個跨度有一個類「紅色」。

<div> 
    <span class="red"></span> 
    <span class="red"></span> 
    <p> 
    <b></b> 
    </p> 
    <span id="select me"></span> 
</div>

這樣做的主要原因是我有一個可編輯div中的元素。他們用一個css計數器編號。有些元素可能會像數字一樣組合在一起，即2a和2b，而另一些則不是，所以我最終可能會得到元素1,2a，2b，2c，3等。我使用的類名稱只是告訴我它是一個「子」元素並增加子計數器但不增加主元素計數器。在一堆子元素之後沒有下一個元素的類告訴我這是最後一個子元素，我應該重置子計數器。我這樣設置的原因是因爲我想能夠移動元素並自動更新編號。而且，只需通過切換類名就可以很容易地改變某個子元素。

來源

2013-02-09 Daniel H

您能否提供第二種測試方案，以滿足您的條件？ – j08691 2013-02-09 21:56:25

沒有辦法在選擇器中說「同一類型的兄弟姐妹」。但是你可以使用兄弟選擇您所選擇的選擇以下內容，這些組合成滿足您的需求，如單選擇：

span.red + span, div.red + div 
{ 

}

來源

2013-02-09 21:57:13 Plynx

這個問題是它只選擇直接兄弟，而下一個「span」可能不是下一個兄弟（請參閱我的更新後的文章以獲取更多示例和進一步解釋） – 2013-02-10 03:25:12

我想有另一個或兩個案例來測試這個，但這似乎對你的工作，例如：

span.red ~* span { 
    background: red; 
}

jsFiddle example

來源

2013-02-09 21:59:08 j08691

這適用於給定示例，但不適用於其他我已經嘗試過了。我將添加更多示例。 – 2013-02-10 03:04:01

如果它只是嵌套在級別，你可以試試這個：

.red + * > span { 
    color: red; 
}

這是什麼用例？爲什麼不只是將紅色添加到想要以相同方式設計的所有元素？

來源

2013-02-09 22:08:54 Jeffpowrs

請參閱我編輯的文章，瞭解我正在嘗試做什麼的解釋。如果我只是想讓所有元素成爲「子」元素都具有相同的類名稱，那麼無法知道下一集何時開始或結束。 – 2013-02-10 03:30:17

基於同一類型的前一個元素選擇元素

回答

相關問題