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

发布于 2022-09-05 23:44:05 字数 814 浏览 26 评论 0

<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是红色的
大概就是这个意思

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

雄赳赳气昂昂 2022-09-12 23:44:06
 .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;
            }  
烟雨扶苏 2022-09-12 23:44:05

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

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

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

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

// 最后一个
.row .picker:nth-last-child(1)
沙与沫 2022-09-12 23:44:05
$('.picker').css('color','red');
$('.row').find('.picker:first').css('color','green');
$('.row').find('.picker:last').css('color','green');
永不分离 2022-09-12 23:44:05
.picker{
    color: red;
}
.row>.picker:first{
    color: green;
}
.row>.picker:last{
    color: green;
}
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文