css伪类选择器
时间:2019-02-16
本文章向大家介绍css伪类选择器,主要包括css伪类选择器使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
css中有许多的伪类选择器,用来实现一些特殊的效果
链接
选择器 | 实例 | 说明 |
---|---|---|
link | a:link | 选择所有未访问的链接 |
visited | a:visited | 选择所有访问过的链接 |
hover | a:hover | 鼠标放在上面的状态 |
active | a:active | 正在活动的链接 |
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
注意:
- 在css定义中a标签的
hover
必须放在link
和visited
之后,才是有效的。 - 在css中a标签的
active
必须放在hover
之后才有效,其他标签不受限制。 link
、visited
只能用在a
标签中
标签、元素查找类
选择器 | 实例 | 说明 |
---|---|---|
:first-child | p:first-child | 选择器匹配属于任一元素的第一个子元素的p 标签 |
:first-line | p:first-line | 选择每个p 元素的第一行 |
:first-letter | p:first-letter | 选择每个p 元素的第一个字母 |
:first-of-type | p:first-of-type | 选择每个父元素是p 元素的第一个p子元素 |
:last-child | p:last-child | 选择所有p 元素的最后一个子元素 |
:last-of-type | p:last-of-type | 选择每个p 元素是其母元素的最后一个p元素 |
:not(selector) | :not§ | 选择所有p以外的元素 |
进行标签状态的操作
选择器 | 实例 | 说明 |
---|---|---|
:hover | p:hover | 鼠标放在元素上的操作 |
:active | p:active | 鼠标选中该元素的操作 |
:focus | input:focus | input选中焦点的操作 |
注意:
focus
只适用于有几焦点的元素。
标签位置的操作
选择器 | 实例 | 说明 |
---|---|---|
:before | p:before | 在p标签前面进行的操作 |
:after | p:after | 在p标签后面进行的操作 |
- Spring Cloud中Hystrix仪表盘与Turbine集群监控
- 轻量级压力测试工具 - AB
- Spring Cloud中Hystrix的请求合并
- Spring Cloud中Hystrix的请求缓存
- mysql主从复制配置
- Spring Cloud系列勘误
- Spring Cloud Stream使用细节
- Redis3 对集群进行重新分片
- Spring Cloud Stream初窥
- jquery事件绑定性能测试
- Spring Cloud Bus整合Kafka
- 图解Mac下如何安装管理MySQL
- Spring Cloud Bus整合RabbitMQ
- 结合Scikit-learn介绍几种常用的特征选择方法(下)
- 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 实例
- PHP实现关键字搜索后描红功能示例
- 如何在CentOS中安装PHP7.4的方法步骤
- Linux安装Python3如何和系统自带的Python2并存
- Python Tricks 使用 pywinrm 远程控制 Windows 主机的方法
- PHP学习记录之常用的魔术常量详解
- laravel orm 关联条件查询代码
- PHP实现财务审核通过后返现金额到客户的功能
- Laravel框架中的路由和控制器操作实例分析
- php利用array_search与array_column实现二维数组查找
- Python实现手绘图效果实例分享
- php如何把表单内容提交到数据库
- Laravel5.5 视图 – 创建视图和数据传递示例
- 浅谈Python爬虫原理与数据抓取
- PHP封装cURL工具类与应用示例
- php中isset与empty函数的困惑与用法分析