2017-10-13 88 views
1

對不起,我不太清楚如何闡述問題,所以這個例子可能更好。我該如何定位一類課程的第一個實例

我想針對下列標記的類

<div class="wrapper"> 
    <div class="message bot"></div> <-- HERE 
    <div class="message bot"></div> 
    <div class="message human"></div> <-- HERE 
    <div class="message bot"></div> <-- HERE 
    <div class="message bot"></div> 
    <div class="message human"></div><-- HERE 
    <div class="message human"></div> 
    <div class="message human"></div> 
    <div class="message human"></div> 
    <div class="message bot"></div> <-- HERE 
    <div class="message bot"></div> 
    <div class="message bot"></div> 
</div> 

或者,如果你能提出更好的問題的標題,將是巨大的也是!

作爲對this question的重複標記的迴應,我會說這是不同的,因爲每個項目之間存在隨機數量的可能「bot」div或「human」div。

+0

或許,如果有一個輕量級的JS功能,可以選擇它,那也可以。 – jackdh

+0

我不怪你。這個問題很難闡明。它之前已經被問過了,但是在[不同的](https://stackoverflow.com/questions/16678857/apply-style-to-first-element-in-a-row-of-similar-elements)和[specific ](https://stackoverflow.com/questions/42588300/repeated-first-occurence-of-an-element)僞裝很難涵蓋所有的基礎。這就是重複提問的原因,更重要的是,這不是一件壞事。只要你鏈接到合適的副本,當然......作爲回答鏈接問題的人,我同意這不是一個合適的副本。 – BoltClock

回答

3

你可以做這樣的事情,但有可能是這種方法的侷限性(與繼承的樣式):

.bot { 
 
    color: red; 
 
} 
 

 
.human { 
 
    color: green; 
 
} 
 

 
.human + .human, 
 
.bot + .bot { 
 
    color: inherit; /* reset necessary style back */ 
 
}
<div class="wrapper"> 
 
    <div class="message bot">bot</div> <!-- HERE --> 
 
    <div class="message bot">bot</div> 
 
    <div class="message human">human</div> <!-- HERE --> 
 
    <div class="message bot">bot</div> <!-- HERE --> 
 
    <div class="message bot">bot</div> 
 
    <div class="message human">human</div> <!-- HERE --> 
 
    <div class="message human">human</div> 
 
    <div class="message human">human</div> 
 
    <div class="message human">human</div> 
 
    <div class="message bot">bot</div> <!-- HERE --> 
 
    <div class="message bot">bot</div> 
 
    <div class="message bot">bot</div> 
 
</div>

+0

什麼是加號? –

+0

@Bla ...:https://stackoverflow.com/questions/1139763/what-does-the-plus-sign-css-selector-mean – BoltClock

+0

很好,謝謝! – jackdh

相關問題