前端 CSS的选择器 伪类选择器
伪类选择器
常用的几种伪类选择器。
伪类选择器一般会用在超链接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>
前端 CSS的选择器 伪类选择器的更多相关文章
- python 全栈开发,Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)
一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...
- CSS属性、伪类选择器,CSS3选择器
CSS1时IE6是部分支持,伟大的IE6!CSS2时IE6部分支持,伟大的IE6依旧是部分支持!CCS3盛行CSS4也已经提上日程的现在,IE6完全不支持.IE6你该走了,我们会永远记住你的功绩的!I ...
- CSS 选择器之基本选择器 属性选择器 伪类选择器
CSS 选择器 常见的选择器列表图 CSS选择器笔记 基本选择器 通配符选择器(*) 元素选择器(E) 类选择器(.className) 所有浏览器都支持类选择器,但多类选择器(.classNa ...
- 前端(六)—— 伪类选择器:a标签的伪类、内容伪类、索引伪类、取反伪类
a标签的伪类.内容伪类.索引伪类.取反伪类 一.a标签的四大伪类 :link:未访问状态 :hover:悬浮状态 :active:活跃状态 :visited:已访问状态 四大伪类也可用于其他标签 &l ...
- CSS基础 结构伪类选择器 last-child、first-child和nth-of-type的使用方法
一.通过伪类选择器查找单个标签元素html结构 <div> <a herf='#'>导航1</a> <a herf='#'>导航2</a> ...
- CSS选择器之伪类选择器(元素)
:first-child 选择某个元素的第一个子元素(IE6不支持) :last-child 选择某个元素的最后一个子元素 :first-of-type [CSS3]选择一个上级元素下的第一个同类子元 ...
- CSS3 选择器——伪类选择器
前面花了两节内容分别在<CSS3选择器——基本选择器>和<CSS3选择器——属性选择器>介绍了CSS3选择器中的基本选择器和属性选择器使用方法,今天要和大家一起学习CSS3选择 ...
- CSS选择器之伪类选择器(伪元素)
selection [CSS4]应用于文档中被用户高亮的部分(比如使用鼠标或其他选择设备选中的部分).(IE8及以下不支持)(火狐-moz-selection) first-line 选择每个 < ...
- CSS选择器之伪类选择器(交互)
:link 选取未访问链接 :active 选取活动链接(单击某链接,未松开鼠标时). :visited 选取已被访问的链接. :target 链接指定的目标 :hover 当鼠标浮在元素上方时. : ...
随机推荐
- 通过METAMASK调试和发布智能合约指南(转载)
2017-12-07 芯链团队 小明微思考 原文地址:https://mp.weixin.qq.com/s?__biz=MzA4Mzk2MzUzNg==&mid=2651223347& ...
- Git工程开发实践(四)——Git分支管理策略
A successful Git branching model https://nvie.com/posts/a-successful-git-branching-model/ Git工程开发实践( ...
- BOM-window
窗口位置 screenLeft和screenTop screenLeft 和 screenTop 属性,分别用于表示窗口相对于屏幕左边和上边的位置.Firefox 则在screenX 和 screen ...
- bzoj5017 [Snoi2017]炸弹 (线段树优化建图+)tarjan 缩点+拓扑排序
题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=5017 题解 这个题目方法挺多的. 线段树优化建图 线段树优化建图的做法应该挺显然的,一个炸弹能 ...
- 前端之JavaScript:JS之DOM对象三
js之DOM对象三 一.JS中for循环遍历测试 for循环遍历有两种 第一种:是有条件的那种,例如 for(var i = 0;i<ele.length;i++){} 第二种:for ...
- spring5
Spring 是面向 Bean 的编程(Bean Oriented Programming, BOP) ,Spring 提供了 IOC 容器通过配置文件或者注解的方式来管理对象之间的依赖关系. 控制反 ...
- 锁,threading local,以及生产者和消费者模型
1.锁:Lock(一次放行一个) 线程安全,多线程操作时,内部会让所有的线程排队处理. 线程不安全:+人=>排队处理 以后锁代码块 v=[] lock=threading.Lock()#声明锁 ...
- NOIP模拟赛(by hzwer) T1 小奇挖矿
[题目背景] 小奇要开采一些矿物,它驾驶着一台带有钻头(初始能力值 w)的飞船,按既定 路线依次飞过喵星系的 n 个星球. [问题描述] 星球分为 2 类:资源型和维修型. 1. 资源型:含矿物质量 ...
- for-in语句和with语句、break和continue语句
for-in语句 for-in语句是一种精准迭代语句,可以用来枚举对象的属性,用以遍历一个对象的全部属性. for…in声明用于对数组或者对象的属性进行循环操作: for…in循环中的代码每执行一次, ...
- Java——常用类(Math)
[常用方法] 这些方法为静态方法.