为什么这段 CSS 的 first-of-type 不起作用？

V2EX = way to explore

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

现在注册

已注册用户请登录

Can I use?

› http://caniuse.com/

Less

› http://lesscss.org

Cool Libraries

› Bootstrap from Twitter

› Jetstrap

这是一个创建于 1017 天前的主题，其中的信息可能已经有所发展或是发生改变。

按照我的理解，这段 CSS 应该作用于.num-wrapper 下的第一个.child 元素(也就是<span class='child'>2</span>)，但为什么不起作用？(演示效果： https://jsbin.com/zamumatoce/edit?html,css,output)

<div class="num-wrapper">
  <span>1</span>
  <span class='child'>2</span>
  <span>3</span>
  <span class='child'>4</span>
</div>

.child:first-of-type {
  color: blue;
  font-size: 2em;
}

5 条回复 • 2022-02-18 09:15:48 +08:00

gucheen

2022-02-17 17:43:06 +08:00

人特性命名都告诉你是 first of **type**，你还在 class 。。。

noe132

2022-02-17 17:46:02 +08:00

type 指的是 element type 。
你的例子里
:first-of-type 会选择外层 div ，第 1 个 span
.child 会选择第 2, 4 个 span
然后这两个结果取并集，结果就是空集，匹配到了 0 个元素。

66beta

2022-02-17 17:48:38 +08:00

不支持类名的方式

可以这样：
```css
.child {
color: blue;
font-size: 2em;
}
.child ~ .child {
color: black;
font-size: 1em;
}
```

manyfreebug

2022-02-17 21:09:55 +08:00

@noe132 交集并集的概念你好像弄混了 :( 而且第一次见用集合的概念来解释 first-of-type 之类的

Felix96

2022-02-18 09:15:48 +08:00

一楼原因说的很明确了，
如果目的只是是单独作用第几个 span 的话，可以这样：

.num-wrapper>span:nth-of-type(2)
{
color: blue;
font-size: 2em;
}