selector :first-child 这个是后代选择器. 怪异, 注意避免而不是理解.
selector:first-child
当前 selector 选中的元素集合中的第一个元素
selector:last-child
当前 selector 选中的元素集合中的最后一个元素.
但是有问题, :last-child 不生效.
应该是:
1 当前 selector 的父元素 parent
2 parent所有子元素, [a,b,c]
3 子元素的集合的第一个元素, 如果是 selector
4 设置样式, 生效.
**if(selecor.parent.childElementList.firstElement === selector){
生效
}**所以使用这两个伪类, 在其上添加一个父元素.就可以认为是第一种实现了.
nth-child() 同样适用于上面的规则.
注意这里的 n 有很大发展空间, 可以实现 奇／偶, 选择哪几个, 从哪几个开始选.
nth-last-child() 倒着选
:first-of-type
:last-of-type
:nth-of-type
:nth-last-of-type
:root
选择文档根元素.就是 html
:empty
选择元素中连个空格都没有的元素
:not
否定选择器
:only-child
在集合只有一个元素的时候才会生效.
::selection
只能设置两个属性：background,color.
selector :first-child 这个是后代选择器. 怪异, 注意避免而不是理解.
selector:first-child
当前 selector 选中的元素集合中的第一个元素
selector:last-child
当前 selector 选中的元素集合中的最后一个元素.
但是有问题, :last-child 不生效.
应该是:
1 当前 selector 的父元素 parent
2 parent所有子元素, [a,b,c]
3 子元素的集合的第一个元素, 如果是 selector
4 设置样式, 生效.
**if(selecor.parent.childElementList.firstElement === selector){
生效
}**所以使用这两个伪类, 在其上添加一个父元素.就可以认为是第一种实现了.
nth-child() 同样适用于上面的规则.
注意这里的 n 有很大发展空间, 可以实现 奇／偶, 选择哪几个, 从哪几个开始选.
nth-last-child() 倒着选
:first-of-type
:last-of-type
:nth-of-type
:nth-last-of-type
:root
选择文档根元素.就是 html
:empty
选择元素中连个空格都没有的元素
:not
否定选择器
:only-child
在集合只有一个元素的时候才会生效.
::selection
只能设置两个属性：background,color.
更多CSS3 新增选择器概览 相关文章请关注PHP中文网！
