nth:child 选择器 - 不同的父级

Question

所以我一直对第n个child和select有一些误解。 我一直在想办法，但在搜索后我找不到答案。

这是我的css

p.hi:nth-of-type(1) {
     color: blue;
} 

这是我的html

<div class"head">
    <p class="hi">This is some text.</p>
</div>

<div class"head">
    <p class="hi">This is some text.</p>
</div>

目前 css 正在对两个段落应用蓝色。我如何让它只添加到第一个？我知道如果我将它们都放在同一个 div 中它可以工作但是如果它被嵌套了几次怎么办。我如何 select 只有一个？

看看这个fiddle。 http://jsfiddle.net/x9jkq0x3/

Answer 1

你可以这样做Fiddle

div:nth-of-type(1) p.hi {
    color: blue;
} 

<div class="head">
    <p class="hi">This is some text.</p>
</div>

<div class="head">
    <p class="hi">This is some text.</p>
</div>

Answer 2

你可以用first-child代替class头class嗨 这是示例 Fiddle