css3新增选择器总结

目录

一、属性选择器

二、结构伪类选择器

三、伪元素选择器

四、UI状态伪类选择器

五、反选伪类选择器

六、target选择器 

七、父亲选择器、后代选择器

八、相邻兄弟选择器、兄弟们选择器


一、属性选择器

(除IE6外的大部分浏览器支持)

E:某个标签元素如div,arr:该元素的某个属性:

选择器 解释 例子
E[arr^='value'] 选中属性以‘value’开头的E元素
E[arr$='value'] 选中属性以value结尾的E元素
E[arr*='value'] 选中属性包含value的E元素

补充:

1、E:root——匹配文档的根元素,对于HTML文档,就是HTML元素

2、E:empty——匹配一个不包含任何子元素的元素,注意,文本节点也被看作子元素

二、结构伪类选择器

(FireFox 1.5/2.0/3.0 支持E:root,FireFox 3.0支持E:last-child、E:empty,IE6/7/8不支持)

选择器 解释 示例
E:first-child 父元素下第一个子元素
E:last-child 父元素下最后一个子元素
E:nth-child(n) 父元素下第n个子元素
E:nth-child(even) 父元素下第偶数个子元素
E:nth-child(odd) 父元素下第奇数个子元素
E:nth-child(公式) 父元素下第公式所指的每一个子元素
E:first-of-typelast-of-type 父元素下第一个E元素、父元素下最后一个E元素
E:nth-of-type(n)、nth-of-type(公式) 父元素下第n个E元素、父元素下第公式所指的每一个E元素
E:nth-of-type(even) 父元素下第偶数个E元素
E:nth-of-type(odd) 父元素下第奇数个E元素
E:nth-child和E:nth-of-type区别

1、E:nth-child(n)的对象是E元素下的所有子元素;而nth-of-type(n)的对象指父元素下所有E元素;

2、E:nth-child(n)不一定渲染,当第n个元素不是E时,样式无法渲染;nth-of-type(n)一定渲染

三、伪元素选择器

顾名思义,假的元素,主要是说E::before可以在E元素前面加一个伪元素,E::after可以在E元素后面加一个伪元素。

选择器 解释 示例
E::before 用来实现在元素内容之前插入内容

 

E::after 用来实现在元素内容后面插入内容
E::first-letter 为E元素文本中的首个字母或文字添加样式
E::first-line 用来实现向文本的首行添加样式

四、UI状态伪类选择器

选择器 解释 示例
E:enabled 匹配表单中激活的元素
E:disabled 匹配表单中禁用的元素
E:checked 匹配表单中被选中的radio(单选框)或checkbox(复选框)元素
E::selection 匹配用户当前选中的元素(鼠标在浏览器上选中的文字内容,本来是淡蓝色,通过E::selection,赋予了新的选中样式)

五、反选伪类选择器

选择器 解释 示例
E:not(s) 匹配E选择器中,不是s的所有E选择器

六、target选择器 

选择器 解释 示例
E:target 匹配文档中特定"id"点击后的效果

七、父亲选择器、后代选择器

选择器 解释 示例
父亲选择器div>p{...} E元素的子元素

后代选择器div p{...}

E元素的子元素以及孙子元素等所有的后代元素

八、相邻兄弟选择器、兄弟们选择器

选择器 解释 示例
相邻兄弟选择器:E+F 匹配最邻近的兄弟元素
兄弟们选择器:E ~ F 匹配任何在E元素之后的同级F元素

 

十、最后

欢迎评论区纠错或者补充哦。

猜你喜欢

转载自blog.csdn.net/qq_50276105/article/details/132220153