前端基础HTML---伪类选择器
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>伪类选择器title>
<style type="text/css">
/*
伪类专门用来表示元素的一种特殊的状态
比如: 访问过的超链接,比如普通的超链接,比如获取焦点的文本框
当我们需要为处在这些特殊状态的元素设置样式时,我们可以使用伪类
正常链接
- a:link
访问过的链接
- a:visited (只能定义字体颜色)
鼠标滑过的链接
- a:hover
正在点击的链接
- a:active
:hover和:active也能为其他元素设置
IE6中不支持对超链接以外的元素设置:hover和:active
获取焦点
- :focus
指定元素前
- :before
指定元素后
- :after
选中的元素
- ::selection
*/
/*
没访问过得颜色
*/
a:link{
color: #7FFF00;
}
/*
访问过的颜色
由于涉及到用户的隐私问题,所以使用visited伪类只能设置字体的颜色
*/
a:visited{
color: red;
}
/*
鼠标移过链接的颜色
*/
a:hover{
color: #FF8C00;
}
/*
鼠标点击链接时的颜色
*/
a:active{
color: #8A2BE2;
}
/*
获取焦点状态
IE6不支持
*/
input:focus{
background-color: yellow;
}
/*
为p标签中选中的内容使用样式
selection选中内容
注意: 这个伪类在火狐中需要采用另一种方式编写 ::-moz-selection
*/
/*
兼容大部分浏览器
*/
p::selection{
background-color: yellow;
}
/*
兼容火狐
*/
p::-moz-selection{
background-color: #FF8C00;
}
style>
head>
<body>
<a href="https://v3.bootcss.com/">访问过的链接a>
<a href="https://www.bootcdn.cn/">没访问过的链接a>
<input type="text"/>
<p>selection选中内容p>
body>
html>
原文:https://www.cnblogs.com/leiyanting/p/14949387.html