选择第一个出现某个样式的 dom 节点。

Question

<div class="container">
    <div class="row">
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col picker">3</div>
    </div>
    <div class="row">
        <div class="col">4</div>
        <div class="col picker">5</div>
        <div class="col picker">6</div>
    </div>
    <div class="row">
        <div class="col picker">7</div>
        <div class="col picker">8</div>
        <div class="col picker">9</div>
    </div>
</div>

CSS 如何选中 row 下第一个出现 picker 样式的 div
我的期望就是，所有的 picker 都是红色的字体的，但是 div.row 下，第一个 .picker 和最后一个 .picker 是绿色的，也就是说 3 是绿色的，5 6 是绿色的，7和9是绿色的 8是红色的
大概就是这个意思

Answer 1

楼主要的应该是child 属性吧 ,参考一下。

http://www.w3school.com.cn/cs...

// 第一个
.row .picker:nth-child(1)

http://www.w3school.com.cn/cs...

// 最后一个
.row .picker:nth-last-child(1)

Answer 2

$('.picker').css('color','red');
$('.row').find('.picker:first').css('color','green');
$('.row').find('.picker:last').css('color','green');

Answer 3

.picker{
    color: red;
}
.row>.picker:first{
    color: green;
}
.row>.picker:last{
    color: green;
}

Answer 4

 .col{
                color: green;
            }
             .row:first-child .col:not(:last-child),.row:nth-child(2) .col:first-child,.row:nth-child(3) .col:nth-child(2){
                color: red;
            }