问一个 css 选择器的问题

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

For Existing Member Sign In

Can I use?

› http://caniuse.com/

Less

› http://lesscss.org

Cool Libraries

› Bootstrap from Twitter

› Jetstrap

This topic created in 2246 days ago, the information mentioned may be changed or developed.

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

12 replies • 2020-07-08 10:14:47 +08:00

SunriseFox

Mar 16, 2020

CSS 八成大概也许可能差不多做不到...

cmdOptionKana

Mar 16, 2020

实在不行就加上 js 吧

waiaan

Mar 16, 2020

@cmdOptionKana 只能如此了。

rioshikelong121

Mar 16, 2020

应该做不了因为那一堆 nth-of-type 等选择器只适用于 element 而不是 class。

Carseason

Mar 16, 2020

.item.selected:last-child

FragmentLs

Mar 16, 2020

```css
// first .selected rules
.item.selected {
}

// rest of the .selected rules
.item.selected ~ .item.selected {
}
```

Carseason

Mar 16, 2020

打错了

MinYa

Mar 16, 2020

举例默认背景颜色黑色，选中要设置为白色。
.selected{
background: #fff;
}
.selected ~ .selected{
background: #000;
}

waiaan

Mar 16, 2020

@FragmentLs
@MinYa

可行，多谢！

loading

Mar 16, 2020 via Android

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

ChanKc

Jul 8, 2020 via Android

div .item.selected::first-child

ChanKc

Jul 8, 2020 via Android

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