CSS3 :nth-child() 选择器,css选择器

一、nth-child()

1. nth-child(n)：父元素下的第n个子元素，n>0，索引从1开始。不区分子元素类型。

2. nth-child(odd)：父元素下的奇数子元素，等同于：nth-child(2n-1)。区分子元素类型。

3. ntn-child(even)：父元素下的偶数子元素，等同于：nth-child(2n)。区分子元素类型。

4. nth-child(an+b)：父元素的an+b个子元素，区分子元素类型。

5. first-child：父元素下的第一个子元素，如果第一个子元素不是该类型，选择不到。等同于：nth-child(1)。

6. last-child：父元素下的最后一个子元素，如果最后一个子元素不是该类型，选择不到。

二、nth-of-type()

匹配属于父元素的特定类型的第n个子元素，忽略不是该类型的元素。

:nth-of-type(n)选择器匹配同类型中的第n个同级兄弟元素。

n可以是一个数字，一个关键字，或者一个公式。

 

使用公式（an+ b）.描述：a代表一个循环的大小，N是一个计数器（从0开始），以及b是偏移量。

在这里，我们对所有索引是3的倍数的p元素指定了背景颜色：

p:nth-of-type(3n+0)
{
	background:#ff0000;
}

 

 

:out-of-range	:out-of-range	匹配值在指定区间之外的input元素	3
:in-range	:in-range	匹配值在指定区间之内的input元素	3
:read-write	:read-write	用于匹配可读及可写的元素	3
:read-only	:read-only	用于匹配设置 "readonly"（只读） 属性的元素	3
:optional	:optional	用于匹配可选的输入元素	3
:required	:required	用于匹配设置了 "required" 属性的元素	3
:valid	:valid	用于匹配输入值为合法的元素	3
:invalid	:invalid	用于匹配输入值为非法的元素	3