css选择器

做网页过程中发现对选择器理解不透彻。

1.nth-child
先找父元素在找指定的那个标签。

p:nth-child(2)

选择属于其父元素的第二个子元素的每个 p 元素。

2.nth-last-child

p:nth-last-child(2)

和nth-child用法一致，只是nth-child是从第一个开始计数，而nth-last-child是从倒数第一个开始计数的。

3.nth-of-type

p:nth-of-type(2)

选择属于其父元素第二个 p 元素的每个 p 元素。
选择匹配属于父元素的特定类型的第N个子元素的每个元素。但是nth-child()选取的与类型无关。
查询时发现张鑫旭的空间有说到这段，复制他举得例子，更好理解。

<section>
<div>我是一个普通的div标签</div>
<span>我是一个普通的span标签</span>
<p>我是第1个p标签</p>
<p>我是第2个p标签</p> <!-- 希望这个变红 -->
</section>
这个时候用p:nth-child（2）将不会选择任何标签，而p：nth-of-type（2）会选中变红，他表示父标签下的第二个p元素。而nth-child不会，因为父级元素下的第二个元素并不是p所以不会变色的。

4.nth-last-of-type（n）
同上，但是从最后一个子元素开始计数。

5.last-child

p:last-child

选择属于其父元素最后一个子元素每个 p元素。

6.：first-child

p:first-child

选择属于父元素的第一个子元素的每个 p 元素。

7.：first-of-type

p:first-of-type

选择属于其父元素的首个 p 元素的每个 p 元素。

8.：last-of-type

p:last-of-type

选择属于其父元素的最后 p 元素的每个 p 元素。

选择器的优先级
!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

注意：

1. 优先级相同时，则采用就近原则，选择最后出现的样式;
2. 继承得来的属性，其优先级最低;