nth-of-type

nth-of-type与nth-child

对于:nth-child选择器，在简单白话文中，意味着选择一个元素如果：

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

对于:nth-of-type选择器，意味着选择一个元素如果：

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

下面实例就可以看到这两个选择器之间的差异表现了，如下HTML代码：

<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与类

参考： https://stackoverflow.com/questions/6447045/css3-selector-first-of-type-with-class-name

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 .