Select even and odd childs of a particular class a

问题:

HTML:

<div id="container">
  <div class="b">b7</div>
  <div class="b">b8</div>
  <div class="a">a1</div>
  <div class="b">b1</div>
  <div class="b">b2</div>
  <div class="b">b3</div>
  <div class="a">a2</div>
  <div class="a">a3</div>
  <div class="b">b4</div>
  <div class="b">b5</div>
  <div class="b">b6</div>
</div>

I want odd siblings of class b which comes after class 'a' i.e b1, b3, b4, b6 (should not b7)are to be selected. is it possible using CSS?

回答1:

Yes you can (you do mean even tho, instead of odd, if you want to select b1, b3, b4 and b6):

.a ~ .b:nth-child(even) {
    color: red;
}

Also check this demo

回答2:

Check this fiddle

.a+.b, .a+.b+.b+.b{
    background: red;
}

I'm using adjacent sibling character. But this solution may not be feasible when the the .b count is more.