CSS Selectors 伪类选择符
郦磊
p:hover 鼠标滑过; cursor : 光标; pointer : 手型; crosshair : 十字交叉线; wait : 沙漏等待;
link : 链接; hover : 鼠标滑过; active : 点击,活动效果; visited : 访问过的效果;
链接取消下划线效果 : text-decoration:none;
链接上下两根线 : text-decoration:underline overline;
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>伪类选择符</title>
<meta name="Keywords" content="关键字">
<meta name="description" content="简介">
<!-- p:hover 鼠标滑过字体变色
cursor 光标; pointer 手型; crosshair 十字交叉线
wait 沙漏等待状态;
link 链接的颜色; hover 鼠标滑过; active 点击、活动效果
visited 访问过的效果
连接取消下划线效果 text-decoration: none
链接上下两根线 text-decoration: underline overline;
-->
<style>
/*控制样式效果,如下是控制所有链接默认效果*/
p:hover {
/*cursor: pointer;*/
/*cursor: crosshair;*/
cursor: wait;
color: #027902;
}
div.box:hover {
cursor: pointer;
color: red;
}
p:not(:first-child) {
background-color: #10f574;
}
/*链接的颜色使用*/
a:link {
color: yellow;
}
/*鼠标经过效果*/
a:hover {
color: red;
}
/*点击,活动效果*/
a:active {
color: green;
}
/*访问过的*/
a:visited {
color: gray;
}
/*连接取消下划线效果 text-decoration: none*/
/*定义链接样式效果,样式类名为mylink,控制标签a标签
如果那个链接标签使用此样式,则在标签上加 class=mylink*/
a.mylink:link, a.mylink:visited, a.mylink:active {
color: green;
text-decoration: none;
}
a.mylink:hover {
color: blue;
/*链接上下两根线*/
text-decoration: underline overline;
}
</style>
</head>
<body>
<a class="mylink" href="https://www.cadillac.com.cn/">凯迪拉克</a>
<p>Lorem ipsum dolor.</p>
<p>Commodi, cumque sed!</p>
<p>Consectetur, eaque, nulla?</p>
<hr>
<div class="box">雪中悍刀行</div>
<hr>
<a href="c5shuxing.html">属性</a>
</body>
</html>
类似资料：