Question

我希望选择不同父母中的第一个div .labelinput。我不想选择父母，因为我有不同的父母。是否可以只定义一次？

尝试：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

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

请参阅http://jsbin.com/cupisefore/1/edit

Answer 2

您的示例更具体：

＆＃13;

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

＆＃13;

<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>

＆＃13;

OP评论后，最终的解决方案是：

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

Answer 3

第一种类型也有效：

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

请参阅http://jsfiddle.net/x7Lcutvx/9/

选择不同父母的第一个班级孩子

3 个答案: