### nth-of-type与nth-child

1. 这是个段落元素
2. 这是父标签的第二个孩子元素

1. 选择父标签的第二个段落子元素

<section>
<div>我是一个普通的div标签</div>
<p>我是第1个p标签</p>
<p>我是第2个p标签</p>  <!-- 希望这个变红 -->
</section>


CSS测试代码：

p:nth-child(2) { color: red; }
p:nth-of-type(2) { color: red; }


p:nth-child(2)渲染的结果不是第二个p标签文字变红，而是第一个p标签，也就是父标签的第二个子元素。如下效果截图:

p:nth-of-type(2)的表现显得很坚挺，其把希望渲染的第二个p标签染红了，如下截图：

### nth-of-type与类

It's not possible using just one selector. The :first-of-type pseudo-class selects the first element of its type (div, p, etc). Using a class selector (or a type selector) with that pseudo-class means to select an element if it has the given class (or is of the given type) and is the first of its type among its siblings.

Unfortunately, CSS doesn't provide a :first-of-class selector that only chooses the first occurrence of a class. As a workaround, you can use something like this:

.myclass1 { color: red; }
.myclass1 ~ .myclass1 { color: /* default, or inherited from parent div */; }


Explanations and illustrations for the workaround are given here and here.