CSS伪类与伪元素
时间:2022-07-24
本文章向大家介绍CSS伪类与伪元素,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
CSS伪类与伪元素
每日更新前端基础,如果觉得不错,点个star吧 ? https://github.com/WindrunnerMax/EveryDay
CSS引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说,伪类和伪元素是用来修饰不在文档树中的部分,比如,一句话中的第一个字母,或者是列表中的第一个元素。
伪类
伪类用于当已有元素处于的某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的。比如说,当用户悬停在指定的元素时,我们可以通过:hover
来描述这个元素的状态。虽然它和普通的css
类相似,可以为已有的元素添加样式,但是它只有处于dom
树无法描述的状态下才能为元素添加样式,所以将其称为伪类。
状态性伪类
是基于元素当前状态进行选择的。在与用户的交互过程中元素的状态是动态变化的,因此该元素会根据其状态呈现不同的样式。当元素处于某状态时会呈现该样式,而进入另一状态后,该样式也会失去。
- 常见的状态伪类
-
:link
应用于未被访问过的链接 -
:hover
应用于鼠标悬停到的元素 -
:active
应用于被激活的元素 -
:visited
应用于被访问过的链接,与:link
互斥 -
:focus
应用于拥有键盘输入焦点的元素
-
结构性伪类
CSS3
新增选择器,利用dom
树进行元素过滤,通过文档结构的互相关系来匹配元素,能够减少class
和id
属性的定义,使文档结构更简洁。
- 常见的伪元素选择器
-
div:first-child
选择属于其父元素的第一个子元素的每个div
元素 -
div:last-child
选择属于其父元素最后一个子元素的每个div
元素 -
div:nth-child(n)
选择属于其父元素的第n个子元素的每个div
元素 -
div:nth-last-child(n)
同上,从这个元素的最后一个子元素开始算 -
div:nth-of-type(n)
选择属于其父元素第n个div
元素的每个div
元素 -
div:nth-last-of-type(n)
同上,但是从最后一个子元素开始计数 -
div:first-of-type
选择属于其父元素的首个div
元素的每个div
元素 -
div:last-of-type
选择属于其父元素的最后div
元素的每个div
元素 -
div:only-child
选择属于其父元素的唯一子元素的每个div
元素 -
div:only-of-type
选择属于其父元素唯一的div
元素的每个div
元素 -
:empty
选择的元素里面没有任何内容 -
:checked
匹配被选中的input
元素,这个input
元素包括radio
和checkbox
-
:default
匹配默认选中的元素,例如:提交按钮总是表单的默认按钮 -
:disabled
匹配禁用的表单元素 -
:enabled
匹配没有设置disabled
属性的表单元素 -
:valid
匹配条件验证正确的表单元素
-
伪元素
用于创建一些不在文档树中的元素,并为其添加样式。实际上,伪元素就是选取某些元素前面或后面这种普通选择器无法完成的工作。控制的内容和元素是相同的,但它本身是基于元素的抽象,并不存在于文档结构中。比如说,我们可以通过::before
来在一个元素前增加一些文本,并为这些文本添加样式。
CSS3
规范中要求使用单冒号:
用于CSS3
伪类,双冒号::
用于 CSS3
伪元素,目的是区分伪类和伪元素。
- 常见的伪元素选择器
-
::first-letter
选择元素文本的第一个字 -
::first-line
选择元素文本的第一行 -
::before
在元素内容的最前面添加新内容 -
::after
在元素内容的最后面添加新内容 -
::selection
匹配用户被用户选中或者处于高亮状态的部分 -
::placeholder
匹配占位符的文本,只有元素设置了placeholder属性时,该伪元素才能生效
-
- UC Berkeley提出新型分布式执行框架Ray:有望取代Spark
- 卡奇话爬虫使用方法以及下载地址
- flash读取XML 背景自动适应大小
- 记录一个发邮件的cs文件
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(56)-插件---单文件上传与easyui使用fancybox
- xml-rpc(2)-first demo_v2
- xml-rpc(1)-first demo
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(55)-工作流设计-表单布局
- 网站源文件被注入了iframe代码—ARP欺骗的木马病毒攻击
- ASP.NET MVC5+EF6+EasyUI 后台管理系统--工作流演示截图
- 基于CPPN与GAN+VAE生成高分辨率图像
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(54)-工作流设计-所有流程监控
- (收藏)搭建.NET Framework 3.0开发环境 及SharePoint 2007/WSS 3环境
- WCF技术剖析之八:ClientBase<T>中对ChannelFactory<T>的缓存机制
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- js常用函数集锦(持续更新)
- 《Java从入门到失业》第五章:继承与多态(5.8-5.10):多态与Object类
- 构建一个适合stm32mp157系列开发板的嵌入式Linux系统
- linux 达梦数据库 命令行 卸载
- Access Control: Database(数据库访问控制)最新解析及完整解决方案
- 启动Apache Atlas时报错
- Apache Atlas 安装部署
- SwiftUI:禁止用户交互
- Qt音视频开发34-Onvif时间设置
- 网络工程师提高篇 | 路由重发布你了解多少?从原理到配置,瑞哥带你学习一波!
- 短视频APP开发,简单计时功能
- LeetCode | 94.二叉树的中序遍历
- Druid 的整合
- LeetCode | 104.二叉树的最大深度
- Flutter 目录结构和项目资源