选择父母的一个元素，该元素不会紧跟在其父元素之后

Question

我有这个HTML代码：

<div class="form-group well">
    <p>...</p>
    <hr>
    <div class="select-skill">
        ...
    </div>
    <div class="select-skill">
        ...
    </div>
    <div class="select-skill">
        ...
    </div>
    <div class="select-skill">
        ...
    </div>
</div>

我想使用css3为具有select-skill类的第二个孩子设置样式，但我不能使用.select-skill:nth-child(2)，它不起作用。

我知道解决方法是删除<p>...</p><h1>或将select-skill移至新的父级。

是否有任何解决方案可以选择此元素 而不添加任何html代码 ？

Answer 1

JSFiddle

您可以使用：

.select-skill:nth-of-type(2){
  background:red;
}

或者如果不同div中有更多内容，您可以执行以下操作：

.form-group .select-skill:nth-of-type(2){
  /*styles*/
}

代替。