当前位置: 首页 > news >正文

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元素

 

十、最后

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

http://www.lryc.cn/news/122744.html

相关文章:

  • 0基础学C#笔记10:归并排序法
  • nlohmann json:通过for遍历object和array
  • 适配器模式:将不兼容的接口转换为可兼容的接口
  • 【量化课程】07_量化回测
  • 竞赛项目 深度学习花卉识别 - python 机器视觉 opencv
  • 用对角线去遍历矩阵
  • 【vue】点击按钮弹出卡片,点击卡片中的取消按钮取消弹出的卡片(附代码)
  • 【K8S】pod 基础概念讲解
  • ASP.NET Core中间件记录管道图和内置中间件
  • [系统安全] 五十二.DataCon竞赛 (1)2020年Coremail钓鱼邮件识别及分类详解
  • Android学习之路(3) 布局
  • Python实现GA遗传算法优化XGBoost回归模型(XGBRegressor算法)项目实战
  • C#软件外包开发流程
  • 队列的实现
  • Node + Express 后台开发 —— 起步
  • Python学习笔记第五十七天(Pandas 数据清洗)
  • Elasticsearch的一些基本概念
  • Guitar Pro8专业版吉他学习、绘谱、创作软件
  • SpringBoot复习(39)Servlet容器的自动配置原理
  • 【前端 | CSS】盒模型clientWidth、clientHeight、offsetWidht、offsetHeight
  • Django 高级指南:深入理解和使用类视图和中间件
  • 《C语言深度解剖》.pdf
  • 【小梦C嘎嘎——启航篇】string介绍以及日常使用的接口演示
  • 多个 Github 账户访问 Github
  • c#实现命令模式
  • Kubernetes的默认调度和自定义调度详解
  • 使用Spring-Security后,浏览器不能缓存的问题
  • 中睿天下入选河南省网信系统2023年度网络安全技术支撑单位
  • 代码随想录day44 45 46
  • 一探Linux下的七大进程状态