CSS选择器:伪类(图文详解)
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章。欢迎在GitHub上关注我,一起入门和进阶前端。
以下是正文。
伪类(伪类选择器)
伪类:同一个标签,根据其不同的种状态,有不同的样式。这就叫做“伪类”。伪类用冒号来表示。
比如div是属于box类,这一点很明确,就是属于box类。但是a属于什么类?不明确。因为需要看用户点击前是什么状态,点击后是什么状态。所以,就叫做“伪类”。
静态伪类和动态伪类
伪类选择器分为两种。
(1)静态伪类:只能用于超链接的样式。如下:
:link
超链接点击之前
:visited
链接被访问过之后
PS:以上两种样式,只能用于超链接。
(2)动态伪类:针对所有标签都适用的样式。如下:
:hover
“悬停”:鼠标放到标签上的时候
:active
“激活”: 鼠标点击标签,但是不松手时。
:focus
是某个标签获得焦点时的样式(比如某个输入框获得焦点)
PS:以上三种样式,只能用于超链接。
超链接a标签
超链接的四种状态
a标签有4种伪类(即对应四种状态),要求背诵。如下:
:link
“链接”:超链接点击之前
:visited
“访问过的”:链接被访问过之后
:hover
“悬停”:鼠标放到标签上的时候
:active
“激活”: 鼠标点击标签,但是不松手时。
对应的代码如下:(不带注释)
a:link{color:red;}a:visited{color:orange;}a:hover{color:green;}a:active{color:black;}
对应的代码如下:(带注释)
/*让超链接点击之前是红色*/a:link{color:red;}/*让超链接点击之后是绿色*/a:visited{color:orange;}/*鼠标悬停,放到标签上的时候*/a:hover{color:green;}/*鼠标点击链接,但是不松手的时候*/a:active{color:black;
记住,在css中,这四种状态必须按照固定的顺序写:
a:link 、a:visited 、a:hover 、a:active
如果不按照顺序,那么将失效。“爱恨准则”:love hate。必须先爱,后恨。
看一下这四种状态的动图效果:
超链接的美化
问:既然
a{}
定义了超链的属性,和
a:link{}
定义了超链点击之前的属性,那这两个有啥区别呢?
答:
a{}
和
a:link{}
的区别:
a{}
定义的样式针对所有的超链接(包括锚点)
a:link{}
定义的样式针对所有写了href属性的超链接(不包括锚点)
超链接a标签在使用的时候,比较难。因为不仅仅要控制a这个盒子,也要控制它的伪类。
我们一定要将a标签写在前面,将
:link、:visited、:hover、:active
这些伪类写在后面。
举个例子。如果效果:
为了实现上面这个效果,完整版代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>Document</title><style type="text/css">*{margin: 0;padding: 0;}.nav{width: 960px;height: 50px;border: 1px solid red;margin: 100px auto;}.nav ul{/*去掉小圆点*/list-style: none;}.nav ul li{float: left;width: 120px;height: 50px;/*让内容水平居中*/text-align: center;/*让行高等于nav的高度,就可以保证内容垂直居中*/line-height: 50px;}.nav ul li a{display: block;width: 120px;height: 50px;}/*两个伪类的属性,可以用逗号隔开*/.nav ul li a:link , .nav ul li a:visited{text-decoration: none;background-color: purple;color:white;}.nav ul li a:hover{background-color: orange;}</style>
</head>
<body><div class="nav"><ul><li><a href="#">网站栏目</a></li><li><a href="#">网站栏目</a></li><li><a href="#">网站栏目</a></li><li><a href="#">网站栏目</a></li><li><a href="#">网站栏目</a></li><li><a href="#">网站栏目</a></li><li><a href="#">网站栏目</a></li><li><a href="#">网站栏目</a></li></ul></div>
</body>
</html>
上方代码中,我们发现,当我们在定义
a:link
和
a:visited
这两个伪类的时候,如果它们的属性相同,我们其实可以写在一起,用逗号隔开就好,摘抄如下:
.nav ul li a{display: block;width: 120px;height: 50px;}/*两个伪类的属性,可以用逗号隔开*/.nav ul li a:link , .nav ul li a:visited{text-decoration: none;background-color: purple;color:white;}.nav ul li a:hover{background-color: orange;}
如上方代码所示,最标准的写法,就是把link、visited、hover这三个伪类都要写。但是前端开发工程师在大量的实践中,发现不写link、visited也挺兼容。写法是:
a:link、a:visited都是可以省略的,简写在a标签里面。也就是说,a标签涵盖了link、visited的状态(前提是都具有了相同的属性)。写法如下:
.nav ul li a{display: block;width: 120px;height: 50px;text-decoration: none;background-color: purple;color:white;}.nav ul li a:hover{background-color: orange;}
当然了,在写
a:link
、
a:visited
这两个伪类的时候,要么同时写,要么同时不写。如果只写
a
属性和
a:link
属性,不规范。
动态伪类举例
我们在第一段中描述过,下面这三种动态伪类,针对所有标签都适用。
:hover
“悬停”:鼠标放到标签上的时候
:active
“激活”: 鼠标点击标签,但是不松手时。
:focus
是某个标签获得焦点时的样式(比如某个输入框获得焦点)
我们不妨来举下例子。
举例1:
<style type="text/css">/*伪类选择器:动态伪类*//*让文本框获取焦点时:边框:#FF6F3D这种橙色文字:绿色背景色:#6a6a6a这种灰色*/input:focus{border:3px solid #FF6F3D;color:white;background-color:#6a6a6a;}/*鼠标放在标签上时显示蓝色*/label:hover{color:blue;}/*点击标签鼠标没有松开时显示红色*/label:active{color:red;}</style>
效果:
利用这个
hover
属性,我们同样对表格做一个样式的设置:
表格举例:
<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus®"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><title>Document</title><style type="text/css">/*整个表格的样式*/table{width: 300px;height: 200px;border: 1px solid blue;/*border-collapse属性:对表格的线进行折叠*/border-collapse: collapse;}/*鼠标悬停时,让当前行显示#868686这种灰色*/table tr:hover{background: #868686;}/*每个单元格的样式*/table td{border:1px solid red;}</style></head><body><table><tr><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr></table></body>
</html>
效果:
我的公众号
想学习代码之外的软技能?不妨关注我的微信公众号:生命团队(id:
vitateam
)。
扫一扫,你将发现另一个全新的世界,而这将是一场美丽的意外:
CSS选择器:伪类(图文详解)相关推荐
- css3伪类图解,CSS3伪类元素详解/深入浅出
很多朋友提出说对css3"画图"不是很理解, 在跟他们私聊了一段时间以后,加上自己在开始自学css3的时候的疑惑,我觉得大家之所以不是很理解主要是因为对伪元素不太了解,介于画图和C ...
- CSS float的相关图文详解(二)
最近这段时间有些忙,一直没有写关于如何清除浮动的,现在终于抽出时间了,还是那句话,如果哪里有错误或者错别字,希望大家留言指正.我们一起进步! 在CSS中,我们通过float属性实现元素的浮动.浮动框旁 ...
- groovy逆向工程生成自定义实体类图文详解
文章目录 前言 步骤 给idea安装database插件,然后用idea连接数据库 右击数据库名,再点script Exctension,再点go to scrip.... 自定义自己的逆向生成脚本如 ...
- html js不触发_图文详解鼠标事件CSS:hover和JS:mouseover的区别
在工作中为了使页面更具有吸引力,前端开发人员经常会在页面中加上鼠标移入和移出的效果.鼠标移入移出的设置,一般有两种方法,一种是单纯用CSS中的hover伪类,另一种可以用JS 中的DOM事件,即onm ...
- php中继承过来的类初始化顺序,java_图文详解Java中class的初始化顺序,class的装载
在讲class的初始化 - phpStudy...
图文详解Java中class的初始化顺序 class的装载 在讲class的初始化之前,我们来讲解下class的装载顺序. 以下摘自<Thinking in Java 4> 由于Java ...
- css改变伪元素color_jQuery教程 改变css伪元素样式详解
本篇教程介绍了jQuery教程 改变css伪元素样式详解,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入. < 首先我们看一下css伪元素是什么: CSS 伪元素用于向某 ...
- html伪类选择器focus,了解CSS :focus-within伪类选择器
一.了解CSS :focus-within伪类选择器 CSS :focus-within伪类选择器和IE8就开始支持的:focus可以说是近亲,区别在于:focus表示当前元素处于focus状态时候干 ...
- CSS3 属性选择器 伪类选择器 盒模型 圆角 阴影 CSS定位和浮动
HTML是网页的裸框架,但是现在已经是2020年了,你再做出一个80年代的网页来,恐怕是没HR要你了.所以学习CSS的重要性可想而知,CSS用途很广,是一门独立的编程语言,能美化网页,也能进一步提高自 ...
- 使用css伪类选择器,css的伪类选择器的使用
伪类选择器,在不同情况下显示的css,伪类选择器在处理页面的美观是很大帮助.其实很多美丽的按钮或者页面都是有这些基础的知识实现的,掌握好基础很重要. 名字 实例 说明 :link a:link 选择所 ...
- Css 结构伪类选择器
目录 Css 结构伪类选择器 结构伪类-公式 Css 结构伪类选择器 在日常开发中,结构伪类选择器用的还是比较多的熟练的使用它,可以让我们的代码更整洁. 作用与优势: 作用:根据元素在HTML中的结构 ...
最新文章
- PCB 线宽与电流关系
- linux shell map dict 字典数组
- visual studio写python_微软发布Visual Studio的Python开发插件
- keynotes egestas,PPT 渐变背景下载-imsoft.cnblogs
- 分析大数据对思维方式有何影响?了解大数据的特点、来源与数据呈现方式
- zabbix服务器搭建
- 基础:Linux 核心源码是怎么组织的?-转
- python标准库——time模块
- Hough变换——检测直线
- 并行学习框架下基于GAN的城市道路网短时路段交通预测方法
- 基于阿里天池的淘宝用户行为分析
- 29.【Axure 10 】软件母版功能区域
- 怎么把mov格式转换成mp4?
- http 503 service
- 计算机项目管理缩写,项目管理英文缩写!!!
- mysql查询最近7天的数据,没有数据自动补0
- 集成第三方SDK——支付宝支付
- 传播模型——简单的元胞自动机(3)
- 正在连接到192.168.1.118 不能打开到主机的连接, 在端口 1521: 连接失败
- 【python趣味小代码】为你女(男)神打造专属素描照,hhhhhh
热门文章
- 模拟电路概念知识体系梳理(基础部分)
- 使用vue-axios请求geoJson数据报错的问题
- JSON格式数据与数据组件
- iterator and iterable
- console.log()与alert()的区别
- vb.net详解MDI窗体操作方法
- 区县级政府网站群建设要点
- Java13的API_JAVA基础--JAVA API常见对象(其他API)13
- C# list删除 另外list里面的元素_在Python 中 List 操作 9种例子详细了解
- Python函数参数传递:传值还是传引用