伪类
伪类
伪类分为两类,一类是伪类选择器,一类是伪类元素
伪类大多数都是以选择器为依托来表现出来的,我们常说的伪类选择器或者伪类元素,其实说到底也就是一种特殊的选择器或特殊的元素,他们和选择器或元素的本质是没有什么太大的区别的,下面的我们来看看什么是伪类选择器和伪类元素
源代码如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>伪类选择器</title>
<meta name="descrption" content="">
<meta name="keywords" content="">
</head>
<style>
/* 伪类选择器 */
/* 立即生效 */
/* .box{
width:100px;
height:100px;
background-color:yellow;
}
.box:hover{
background-color:blue;
border:10px solid red;
}
.one:link{
color:red;
}
.two{
width:100px;
height:100px;
background-color:yellow;
border:10px solid blue;
}
.three{
width:100px;
height:100px;
background-color:red;
}
.three:hover{
border:10px solid gray;
background-color:green;
} */
/*
伪类选择器（就是一个特殊的选择器）： 不一定立刻生效，需要满足一些特定的条件才能生效
写伪类标签之前都是把原来所要的
伪类选择器的触发状态:
1.：link 元素没有被点击时生效
2.:hover 当鼠标悬停在元素上的时候出现
3.:active 鼠标在元素上按下时
4.:visited 元素被点击过后
其中：:link和:visited只能使用在a标签中
*/
.one:link{ /* 点击之前是设置的red，点击之后就变成了默认的深蓝色； */
color:red;
}
.one:visited{ /* 点击之前是默认的深蓝色，点击之后设置的blue */
color:blue;
}
.three{ /* 未设置:hover时的元素的颜色 */
width:100px;
height:100px;
background-color:yellow;
border:5px solid red;
}
.three:hover{ /* :hover伪类选元素编写时都会写两个，一个是没有加:hover的选择器，一个是加了:hover的选择器，这样两个颜色才可以对比，当鼠标悬浮在元素上时，会出现:hover设置的颜色 */
width:100px;
height:100px;
background-color:blue;
border:5px solid gray;
}
.four{ /* 未设置:active时的元素的颜色 */
width:100px;
height:100px;
margin-bottom:50px;
background-color:yellow;
border:10px solid red;
}
.four:active{ /* :active伪类选元素编写时所要改变的条件都是要写两遍，一个是没加:active的选择器，一个是加了:active的选择器，当鼠标长按下时，才回显示所要设置的颜色 */
background-color:green;}
/* 伪类元素 */
.element::after{content:"after是在所写类名元素的子级最后面添加一个标签";}
.element::before{content:"before是在所写类名元素的子级最前面添加一个标签";}
</style>
<body>
<!-- 伪类选择器 -->
<!-- <div class="box"></div>
<a href="######" class="one">百度</a>
<div class="two"></div>
<div class="three"></div> -->
<a href="##" class="one">:link伪类选择器</a>
<a href="#####" class="two">:visited伪类选择器</a>
<div class="three">:hover伪类选择器</div>
<div class="four">:active伪类选择器</div>
<!-- 伪类元素 -->
<div class="element">
<a href="#">element是元素的意思</a>
</div>
<!-- 总结:before和after是在所写元素的子级最前或者是最后面添加标签,最长用的就是在清除浮动的时候用在父级元素中 -->
</body>
</html>
效果图如下:
其中源代码中对伪类元素的总结写的很好,有兴趣的同学可以看看