我將如何使用CSS來定位這個div？

Question

在下面的代碼中，我將如何使用CSS定位第二個div.b？

<div> 
    <div class="a"></div> 
    <div class="a"></div> 
    <div class="a"></div> 
    <div class="b"></div> 
    <div class="b"></div> 
    <div class="a"></div> 
</div> 

Answer 1

在這個特定的情況下，您可以使用。

EXAMPLE HERE

.b + .b { 
    color:red; 
} 

---

上面假定有不超過兩個，相鄰.b元件。如果情況並非如此，假設仍然只有兩個元素general sibling combinator, ~,會更有用。

EXAMPLE HERE

---

作爲替代方案，你也可以使用以下，將與多個.b元素的工作，不管位置。最初，使用.b ~ .b來設置第二個目標元素的樣式。然後，您需要使用.b ~ .b ~ .b來重置.b元素後面的.b元素的樣式。

EXAMPLE HERE

.b ~ .b { 
    color:red; 
} 
.b ~ .b ~ .b { 
    color:initial; 
} 

這應該在所有情況下理論上的工作，例如：

<div class="a">1a</div> 
<div class="a">2a</div> 
<div class="a">3a</div> 
<div class="b">1b</div> 
<div class="a">4a</div> 
<div class="b">2b</div> <!-- This would be styled red.. --> 
<div class="b">3b</div> 

這也是值得注意的是，價值initial在IE不支持。因此，您可以使用color:#000至reset the color back to the defaults。或者，inheritwould work too。

作爲一個更實際的例子，你可以使用這樣的事情：

EAXMPLE HERE

.b ~ .b { 
    width:200px; 
    background:blue; 
    color:#fff; 
} 
.b ~ .b ~ .b { 
    width:auto; 
    background:transparent; 
    color:#000; 
} 

Answer 2

也有實現你想要做什麼的另一種方式。

div > :nth-child(5){ 

} 

http://jsfiddle.net/WvL88/3/