css3伪类选择器

来源:互联网 发布:unity3d 导弹跟随 编辑:程序博客网 时间:2024/04/30 22:54

是用来参考确定其父元素的,
nth-child(n) 对应根据E元素确定的父元素的所有子元素,
nth-child(2n):选择偶数个的元素
nth-of-type(n) 的不同之处在于其对应的是只有E元素,会忽略其子元素。(此处要配合案例加强理解)

E:nth-child(n) 第n个子元素,计算方法是E元素的全部兄弟元素E:nth-of-type(n) 第n个子元素,计算方法只是E元素,会忽略其子元素的存在 E:nth-last-child(n) 同E:nth-child(n) 计算顺序相反。E:nth-last-of-type(n) 同E:nth-of-type(n) 计算顺序相反。

n遵循线性变化,其取值1、2、3、4、…
关于n的取值范围:
1、当n做为一个独立值时,n取值为n>=1,例如nth-child(n)
2、当n做一个系数时,n取值为n>=0者n<0,例如nth-child(2n+1)、nth-child(-n+5) 此处需要理解2n+1或者-n+5做为一个整体不能小于1;
E:only-child 表示当前以E确定的父元素,除E之外并无其它子元素(独生子);
E:only-of-type表示当前以E确定的父元素, 除E之外不能包含其它和E同类型的子元素;
E:target 结合锚点进行使用,处于当前锚点的元素会被选中;
E:empty 选中没有任何子节点的E元素;


伪元素选择器
E::selection 可改变选中文本的样式
E::placeholder 可改变placeholder默认样式,这个存在明显的兼容问题,比如::-webkit-input-placeholder,具体参考手册进行对比。
E:after、E:before 在旧版本里是伪类,在新版本里是伪元素,新版本下E:after、E:before会被自动识别为E::after、E::before,按伪元素来对待。


“:” 与 “::” 区别在于区分伪类和伪元素

可以参考文章https://www.w3cplus.com/css3/pseudo-class-selector

0 0