问一个 css 选择器的问题

2020 年 3 月 16 日
 waiaan
<div>
  <div class="item"></div>
  <div class="item selected"></div>
  <div class="item selected"></div>
  <div class="item"></div>
  <div class="item selected"></div>
  <div class="item"></div>
</div>

如何选中第一个带‘selected’类名的元素？

2500 次点击
所在节点    CSS
12 条回复
SunriseFox
2020 年 3 月 16 日
CSS 八成大概也许可能差不多做不到...
QingXuJiaZhi
2020 年 3 月 16 日
实在不行就加上 js 吧
waiaan
2020 年 3 月 16 日
@cmdOptionKana 只能如此了。
rioshikelong121
2020 年 3 月 16 日
应该做不了 因为那一堆 nth-of-type 等选择器只适用于 element 而不是 class。
Carseason
2020 年 3 月 16 日
.item.selected:last-child
FragmentLs
2020 年 3 月 16 日
```css
// first .selected rules
.item.selected {
}

// rest of the .selected rules
.item.selected ~ .item.selected {
}
```
Carseason
2020 年 3 月 16 日
打错了
MinYa
2020 年 3 月 16 日
举例默认背景颜色黑色，选中要设置为白色。
.selected{
background: #fff;
}
.selected ~ .selected{
background: #000;
}
waiaan
2020 年 3 月 16 日
@FragmentLs
@MinYa

可行，多谢！
loading
2020 年 3 月 16 日
这种问题，我会用 chrome，控制台，copy selecter……
ChanKc
2020 年 7 月 8 日
div .item.selected::first-child
ChanKc
2020 年 7 月 8 日
为什么我感觉前面的答案都是“选择 selected 且不是第一个”

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://v2ex.xtra.eu.org/t/653318

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX