问一个 css 选择器的问题

<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’类名的元素？

div item class selected

12 条回复 • 2020-07-08 10:14:47 +08:00

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 日 via Android

这种问题，我会用 chrome，控制台，copy selecter……

ChanKc

2020 年 7 月 8 日 via Android

div .item.selected::first-child

ChanKc

2020 年 7 月 8 日 via Android

为什么我感觉前面的答案都是“选择 selected 且不是第一个”

Can I use?

› http://caniuse.com/

Less

› http://lesscss.org

Cool Libraries

› Bootstrap from Twitter

› Jetstrap