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

Can I use?

Less

Cool Libraries

› Jetstrap

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

按照我的理解，这段 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 replies • 2022-02-18 09:15:48 +08:00

gucheen

Feb 17, 2022

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

noe132

Feb 17, 2022

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

66beta

Feb 17, 2022

不支持类名的方式

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

manyfreebug

Feb 17, 2022

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

Felix96

Feb 18, 2022

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

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