一、向被激活的元素添加样式。 伪类选择器 :active
使用此伪类选择器可点击转换样式，可改变所数的类的宽度，高度，颜色等等、、、
<style>标签内容
.weileiyi{
width:200px;
height:200px;
background-color:#4cff00;
}
.weileiyi:active{
width:200px;
height:200px;
background-color:#ff0000;
border-radius:50%;
}
<body>标签内容
<div class="weileiyi" style="text-align:center;color:#ff0000;float:left">点击</div>
二、当鼠标悬浮在元素上方时，向元素添加样式。伪类选择器 :hover
此伪类选择器把鼠标放在所选的类的上方即可更改样式
<style>标签内容
.weileier{
width:200px;
height:200px;
background-color:#4cff00;
color:#ff0000;
}
.weileier:hover{
width:200px;
height:200px;
background-color:#ff0000;
border-radius:50%;
color:#4cff00;
}
<body>标签内容
<div class="weileier" style="margin-left:10px;text-align:center;float:left">鼠标放在上面</div>
其实有实图可以展示的，因为格式问题没有多少时间排版了，复制源码就可以用了
三、改变鼠标指针样式中的光标，同样是使用:hover伪类选择器，不过是加一种属性cursor
可以用在类选择器和输入标签input上，本人现学这两个，别的还没用上。
<style>标签内容
.weileieroone{
width:200px;
height:200px;
background-color:#4cff00;
color:#ff0000;
}
.weileieroone:hover{
width:200px;
height:200px;
background-color:#ff0000;
border-radius:50%;
color:#4cff00;
cursor:pointer;
}
以下是用在输入标签input上的
1、cursor:alias
2、cursor:cell
3、cursor:col-resize
4、cursor:context-menu
5、cursor:copy
6、cursor:crosshair
7、cursor:e-resize
8、cursor:grab
9、cursor:grabbing
10、cursor:help
11、cursor:move
12、cursor:ne-resize
13、cursor:no-dro
14、cursor:none
15、cursor:progress
16、cursor:row-resize
17、cursor:se-resize
19、cursor:vertical-text
20、cursor:wait
21、cursor:zoom-in
22、cursor:zoom-out
其实有实图可以展示的，因为格式问题没有多少时间排版了，复制源码就可以用了
四、向拥有键盘输入焦点的元素添加样式。伪类选择器 :focns
适用于输入标签input上
<style>标签内容
.weileishang {
width:200px;
height:200px;
background-color:#4cff00;
}
.weileishang input:focus {
width: 110px;
height: 20px;
background-color: #ff0000;
border-radius: 5px;
}
<body>标签内容
<div class="weileishang" style="margin-left:10px;float:left"><input type="text" /></div>
其实有实图可以展示的，因为格式问题没有多少时间排版了，复制源码就可以用了
五、向元素的第一个子元素添加样式。伪类选择器 :first-child
此伪类可用于在p、li等等标签中
<style>标签内容
.weileisi{
width:200px;
height:200px;
background-color:#4cff00;
}
.weileisi ul li:first-child{
font-size:90px;
}
<body>标签内容
<div class="weileisi" style="margin-left:10px;float:left">
<ul>
<li>一</li><li>二</li><li>三</li><li>四</li>
</ul>
</div>
其实有实图可以展示的，因为格式问题没有多少时间排版了，复制源码就可以用了
六、向已被访问的链接添加样式 伪类选择器 :visited
向未被访问的链接添加样式 伪类选择器 :link
点击有a标签被访问过的链接会变蓝色，没有被访问的链接变红色
<style>标签内容
a:link{color: red;}
a:visited{color: blue;}
<body>标签内容
<ul><li><a href="#">1lkjhgfdsa</a></li>
<li><a href="#">2mnbvcxz</a></li>
<li><a href="https://wwww.baidu.com">3qwertyuio</a></li>
<li><a href="#">4,mnbvcxcdfghjk</a></li></ul>
然后就跳转到有被访问到的链接的页面
其实有实图可以展示的，因为格式问题没有多少时间排版了，复制源码就可以用了
七、向带有指定lang属性的元素添加样式
<style>标签内容
.weileiqi{
width:200px;
height:200px;
background-color:#4cff00;
}
.weileiqi p:lang(b){
color:#ff0000;
}
<body>标签内容
<div class="weileiqi" style="margin-left:25px;float:left"><p >scsd</p>
<p lang="b">ere</p></div>
其实有实图可以展示的，因为格式问题没有多少时间排版了，复制源码就可以用了
八、可用于在某个元素之前加入某些内容 :before
可用于在某个元素之后加入某些内容 :after
此伪类是在某个元素之前加入某些内容
<style>标签内容
.weileiwu{width:200px; height:200px; background-color:#4cff00; }
.weileiwu p:before {
content:"e☀▂☑";
color: #5cb34e;
font-size:30px;}
<body>标签内容
<div class="weileiwu" style="margin-left:10px;float:left" >
<p>scsd</p>
<p>ere</p></div>
此伪类是在某个元素之后加入某些内容
<style>标签内容
.weileiliu{
width:200px;
height:200px;
background-color:#4cff00;
}
.weileiliu p:after {
content:"der××";
color: #5cb34e;
font-size:30px;
}
<body>标签内容
<div class="weileiliu" style="margin-left:10px;float:left"><p>scsd</p><p>ere</p></div>
其实有实图可以展示的，因为格式问题没有多少时间排版了，复制源码就可以用了