css3的选择器
来源:互联网 发布:大数据时代面临的问题 编辑:程序博客网 时间:2024/05/07 14:02
1.1 选择器
CSS3新增了许多灵活查找元素的方法,极大的提高了查找元素的效率和精准度。CSS3选择器与jQuery中所提供的绝大部分选择器兼容。
1.1.1 属性选择器
参考手册
1、E[attr]表示存在attr属性即可;
2、E[attr=val]表示属性值完全等于val
3、E[attr~=val]表示的一个单独的属性值 这个属性值是以空格分隔的
4、E[attr|=val]表示的要么一个单独的属性值 要么这个属性值是以“-”分隔的
5、E[attr*=val]表示的属性值里包含val字符并且在“任意”位置
6、E[attr^=val]表示的属性值里包含val字符并且在“开始”位置
7、E[attr$=val]表示的属性值里包含val字符并且在“结束”位置
1.1.2 伪类选择器
参考手册
重点理解E是用来参考确定其父元素的,nth-child(n)对应根据E元素确定的父元素的所有子元素,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元素;
1.1.3 伪元素选择器
E::selection 可改变选中文本的样式
E::placeholder 可改变placeholder默认样式,这个存在明显的兼容问题,比如::-webkit-input-placeholder,具体参考手册进行对比。
E:after、E:before在旧版本里是伪类,在新版本里是伪元素,新版本下E:after、E:before会被自动识别为E::after、E::before,按伪元素来对待。
":" 与 "::"区别在于区分伪类和伪元素
- css3常用的选择器
- CSS3的新增选择器
- css3的选择器
- 神通广大的CSS3选择器
- css3-新增的选择器
- css3新增的选择器
- css3的选择器
- CSS3的选择器
- css3的选择器
- CSS3的选择器(一)
- CSS3的选择器
- CSS3的属性选择器
- CSS3的属性选择器
- CSS3的:nth选择器
- css3的选择器
- CSS3选择器的应用
- CSS3的新增选择器示例-属性选择器
- 1、CSS3新增的选择器
- 西游人生
- hdu - 4324 Triangle LOVE【dfs】
- Python科学计算的瑞士军刀——Anaconda 安装与配置
- spring boot 笔记
- 数据库三大范式详解(通俗易懂)
- css3的选择器
- yii2 加密
- 索引的建立过程学习总结
- get与post
- VM中的Linux安装jdk和tomcat
- ReactiveCocoa之RACSignal核心类的使用(三)
- 【每天进步一点点】 项目管理(1)
- javascript DOM编程艺术 案例之局部图片文本更新
- JSP基础