伪类选择器

常用的几种伪类选择器。

伪类选择器一般会用在超链接a标签中

没有访问的超链接a标签样式：

a:link {color: blue;
}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="x-ua-compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Title</title><style type="text/css">.box ul li.item1 a:link{color: red;}</style>
</head>
<body><div class="box"><ul><li class="item1"><a href="#">jack</a></li><li class="item2"><a href="#">ben</a></li><li class="item3"><a href="#">peter</a></li></ul></div>
</body>
</html>

访问过的超链接a标签样式：

a:visited {color: gray;
}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="x-ua-compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Title</title><style type="text/css">.box ul li.item1 a:visited{color: green;}</style>
</head>
<body><div class="box"><ul><li class="item1"><a href="#">jack</a></li><li class="item2"><a href="#">ben</a></li><li class="item3"><a href="#">peter</a></li></ul></div>
</body>
</html>

点击jack字体， jack字体变成绿色

鼠标悬停时在元素上应用样式

a:hover {background-color: #eee;
}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="x-ua-compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Title</title><style type="text/css">.box ul li.item1 a:hover{color: green;}</style>
</head>
<body><div class="box"><ul><li class="item1"><a href="#">jack</a></li><li class="item2"><a href="#">ben</a></li><li class="item3"><a href="#">peter</a></li></ul></div>
</body>
</html>

鼠标悬停时在 a标签jack上面 jack字体马上变成绿色

鼠标点住瞬间的样式：

a:active {color: green;
}

鼠标点住CSS样式改变，鼠标一放手就恢复原来的CSS样式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="x-ua-compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Title</title><style type="text/css">.box ul li.item1 a:active{color: red;}</style>
</head>
<body><div class="box"><ul><li class="item1"><a href="#">jack</a></li><li class="item2"><a href="#">ben</a></li><li class="item3"><a href="#">peter</a></li></ul></div>
</body>
</html>

转载于:https://www.cnblogs.com/mingerlcm/p/10800425.html

前端 CSS的选择器伪类选择器相关推荐

前端 CSS：锚伪类选择器:hover,:active，:visited；等用法总结
前端 CSS:锚伪类选择器:hover,:active,:visited;等用法总结锚伪类选择器:hover,:active,:visited;等用法总结一.什么是锚伪类在支持 CSS 的浏览器 ...
CSS3 属性选择器伪类选择器盒模型圆角阴影 CSS定位和浮动
HTML是网页的裸框架,但是现在已经是2020年了,你再做出一个80年代的网页来,恐怕是没HR要你了.所以学习CSS的重要性可想而知,CSS用途很广,是一门独立的编程语言,能美化网页,也能进一步提高自 ...
CSS :before :after 伪类选择器
CSS :before :after 伪类选择器所有主流浏览器都支持 :after 选择器. 注释:对于 IE8 及更早版本中的 :after,必须声明 <!DOCTYPE>. :bef ...
【第四篇】CSS选择器之伪类选择器
利用组合选择器虽然可以选择子类和兄弟元素,但是无法做到特殊的选择.例如无法选择第几个子类,或者和其同标签的兄弟元素.为此CSS诞生了伪类选择器,用来进行更加灵活的元素选择. 伪类选择器伪类选择器根据 ...
03-高级选择器,属性选择器,伪类选择器
高级选择器分为: 后代选择器子代选择器并集选择器交集选择器后代选择器使用空格表示后代选择器.顾名思义,父元素的后代(包括儿子,孙子,重孙子) .container p{color: red; ...
HTML与CSS基础之伪类选择器(三)
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>伪类选 ...
CSS UI状态伪类选择器
UI状态伪类选择器,用于选择处于某种状态下的UI元素,主要用于HTML表单上,根据表单元素的不同状态,定义不同的样式,来增强用户体验. 表单元素的状态包括获得焦点.失去焦点.选中.未选中.可用.不可用 ...
【CSS 教程系列第 12 篇】什么是 CSS 中的伪类选择器
这是[CSS 教程系列第 12 篇],如果觉得有用的话,欢迎关注专栏. CSS 的选择器有很多,常用的有元素选择器.id 选择器.class 选择器.后代选择器.子代选择器.并集选择器.交集选择器. ...
CSS定位+装饰+伪类选择器拓展
文章目录 CSS定位定位能解决的解决问题: 定位的使用静态定位相对定位绝对定位绝对定位特点子绝父相子绝父相vs子绝父绝子绝父相案例子绝父相水平居中案例子绝父相水平垂直都居中案例导 ...

前端 CSS的选择器伪类选择器

伪类选择器

没有访问的超链接a标签样式：

访问过的超链接a标签样式：

鼠标悬停时在元素上应用样式

鼠标点住瞬间的样式：

前端 CSS的选择器伪类选择器相关推荐

最新文章

热门文章

前端 CSS的选择器 伪类选择器

伪类选择器

没有访问的超链接a标签样式：

访问过的超链接a标签样式：

鼠标悬停时在元素上应用样式

鼠标点住瞬间的样式：

前端 CSS的选择器 伪类选择器相关推荐

最新文章

热门文章

前端 CSS的选择器伪类选择器

前端 CSS的选择器伪类选择器相关推荐