nth：子选择器 - 不同的父母

Question

所以我总是对第n个孩子和选择者产生一些误解。 我一直想弄明白，但在搜索后我找不到答案。

这是我的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中它可以工作，但如果它嵌套了好几次。我如何只选择一个？

看看这个小提琴。 http://jsfiddle.net/x9jkq0x3/

Answer 1

你可以这样做Fiddle

＆＃13;

＆＃13;

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

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用first-child来排课，而不是上课 这是示例Fiddle