什么是伪类?
伪类是一种临时的状态,在一定条件下进行触发,如:hover :active :visited.....,其实伪类是一种选择器的类型,伪类选择器分为了静态伪类和动态伪类
静态伪类选择器
静态伪类选择器只在a标签使用
:link 未访问时链接的状态
:visited 访问后链接的状态
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 鼠标点击前蓝色 */
a:link {
color: blue;
text-decoration: none;
}
/* 鼠标点击后红色 */
a:visited {
color: red;
}
</style>
</head>
<body>
<a href="wwww.baidu.com">百度一下,你就知道</a>
</body>
</html>
点击前显示效果:
点击后显示效果:
动态伪类选择器
动态伪类选择器是所有标签都能使用的选择器,包括a标签哦。
:hover 鼠标移入时候的效果
:active 鼠标点击时的效果
:focus 鼠标聚焦时候效果
什么是伪元素?
伪元素也是一种选择器,但是伪元素::after ::before...伪元素是一个虚拟的节点,会在DOM树中出现
常见的伪元素
::after 在标签后添加内容
::before 在标签前添加内容
::placeholder 选中input框中的placeholer属性的值 (<input type="text" placeholder="sss">)
::first-letter 选中第一个字
::first-line 选中第一行
::selection 鼠标选中时的效果
常见的使用
利用after来进行清除浮动
::after {
content: '';
display: block;
clear: none;
}
伪元素和伪类的区别?
伪元素和伪类都是一种css选择器,但是伪类是一种临时状态,一定条件下触发,而伪元素是一个dom节点,可以利用F12在浏览器中看到如下显示