選擇不同父母的第一個孩子

Question

我想要選擇不同父母的第.labelinput類的第一個div。我不想由父母選擇，因爲我有不同的父母。是否可以只定義一次？

嘗試：

div.labelinput:first-child { 
 
    border-top: 1px solid #efefef; 
 
}

<div class="one"> 
 
    <div class="labelinput">style this</div> 
 
    <div class="labelinput">not this</div> 
 
    <div class="labelinput">not this</div> 
 
</div> 
 

 
<div class="two"> 
 
    <div class="labelinput">style this</div> 
 
    <div class="labelinput">not this</div> 
 
    <div class="labelinput">not this</div> 
 
</div> 
 

 
<!-- ... --> 
 

 
<div class="seventeen"> 
 
    <div class="labelinput">style this</div> 
 
    <div class="labelinput">not this</div> 
 
    <div class="labelinput">not this</div> 
 
</div>

Answer 1

你的例子是工作得更加具體：

div div.labelinput:first-child { 
 
    color: red; 
 
}

<div class="one"> 
 
    <div class="labelinput">style this</div> 
 
    <div class="labelinput">not this</div> 
 
    <div class="labelinput">not this</div> 
 
</div> 
 
<div class="two"> 
 
    <div class="labelinput">style this</div> 
 
    <div class="labelinput">not this</div> 
 
    <div class="labelinput">not this</div> 
 
</div> 
 
<div class="seventeen"> 
 
    <div class="labelinput">style this</div> 
 
    <div class="labelinput">not this</div> 
 
<div class="labelinput">not this</div> 
 
</div>

OP後評論最後的解決方案是：

div div.labelinput:nth-of-type(2) { 
    border-top: 1px solid red; 
} 

Answer 2

div .labelinput:first-child { 
    border-top: 1px solid #efefef; 
} 

見http://jsbin.com/cupisefore/1/edit

Answer 3

類型首先也適用：

div.labelinput:first-of-type { 
    border-top: 1px solid #efefef; 
} 

見http://jsfiddle.net/x7Lcutvx/9/