CSS3中的 nth 选择器的归类

选择方法

:first-child、:last-child、:nth-child()、:nth-last-child()、:nth-of-type()、:nth-last-of-type()、:first-of-type、:last-of-type、:only-child、:only-of-type、:empty

first-child

选择属于其父元素的首个子元素的每个Element元素

ast-child

选择属于其父元素的最后一个子元素的Element元素

nth-child()

nth-child(N)选择器匹配属于其父元素的第N个子元素,不论元素的类型

说明:需要注意以下的几点

          1、这里的的N指的是一个小写的 n  ,

          2、这里记数是从 1 开始的

          3、可以输入一个表达式,如 2n 代表的是偶数,2n+1代表的是奇数,但是没有 * 这种符号,是不可以识别的

               需要强调的是 偶数可以是:odd   奇数是:even

nth-last-child()

匹配属于其元素的第N个子元素的每个元素,不论元素的类型,从最后一个子元素开始计数

这个与nth-chilid() 就是一组的,可以理解为,一个从前,一个从后的开始匹配元素

nth-of-type()

选择器匹配属于父元素的特定类型的第N个子元素的每个元素

nth-last-of-type()

概念匹配属于父元素的特定类型的第N个子元素的每个元素,从最后一个子元素开始计数

first-of-type

first-of-type选择器匹配属于其父元素的特定类型的首个子元素的每个元素

可以看作为 nth-of-type(1)

last-of-type

选择器匹配属于其父元素的特定类型的最后一个子元素的每个元素

可以看作为 nth-last-of-type(1)

only-child

选择器匹配属于其父元素的唯一子元素的每个元素

理解:只能有一个子元素,并且该该子元素为要求的子元素才算符合要求

only-of-type

选择器匹配属于其父元素的特定类型的唯一子元素的每个元素

理解:可以有多个子元素,但是仅仅只能有一个是符合所规定的元素

empty

选择器匹配没有子元素(包括文本节点)的每个元素

猜你喜欢

转载自blog.csdn.net/qq_43238599/article/details/86592027